Ejecutar funcion php desde botón "onclick"

[SrMcLister]

Buenas tardes.
Estoy haciendo el proyecto para fin de curso de ASIR y desarrollando un poco la página web, me ha surgido un problema. Voy con el tiempo en los talones y quiero hacer que al pulsar un botón se ejecute una función para borrar ese registro de la bbdd.
El problema es que el susodicho botón, lo creo en html a partir de php.
Ya se que puede ser muy lioso pero es esto.

Código [Seleccionar] Expandir


<?php
    
include("conexion.php");

//La función que necesito
function borramela($id){
    $sqlb=  mysql_query("DELETE FROM prueba1 where prueba1.id =".$id."");
}

//consulta todos los videos
$sql=mysql_query("SELECT * FROM prueba1",$con);

//muestra los datos consultados
$filas = mysql_num_rows($sql);

if($filas == 0){
    echo "No hay programación";
}
else{
    
while($row = mysql_fetch_array($sql)){
echo "<a>".$row['video']." - ".$row['dia']." - ".$row['hora']." - ".$row['duracion']."<input type='button' value='Borrar' onclick='borramela($row[id])'/></p> \n";
}
}

Al crear el botón mediante un echo dentro de php, no se como tendría que hacer para que funcionara esa función.
Aunque esté utilizando AJAX, no se si serviria al ser HTML dentro de PHP.
Si alguien necesita más datos de como está construido el proyecto o algo que lo diga
Muchas gracias de antemano
Un Saludo
Sr_McLister[].

[gAb1]

Te estás liando con lo de dentro de php y html. Es todo lo mismo: El output de php y html. Y el manejo de datos en el server (mediante php) es otra cosa. Espero que se entienda.

Un consejo, si estás empezando a aprender programación php, no lo hagas con funciones obsoletas, ya que en la ultima versión fueron eliminadas (incluida la api mysql y todas sus funciones). Como mínimo usa mysqli con sentencias preparadas que añaden un mínimo de seguridad "out of the box".

No es necesario usar ajax, puedes usar el evento submit normal. Todo depende de como lo quieras hacer. Pero si es un boton para eliminar algo si, lo más normal es ajax en estos casos.

Si vas a usar ajax hazlo con jQuery ya que te ahorra mucho tiempo y es muchisimo más facil de usar que javascript vanilla. También te sirve para el resto de tus scripts.

Pon esto en tu archivo scripts.js o crealo:

Código (javascript) [Seleccionar] Expandir

$(function () {
   $('#borrar').on('click', function () {
       var id = $(this).data().id;
       $.post( '/tu_archivo.php', { id: id } );
   });
});

Dentro de $(function () {}; puedes poner todos tus scripts jquery.

Y el archivo php, le he hecho unos arreglos, espero que no te importe  

Código (php) [Seleccionar] Expandir

include('conexion.php');

$borrar = isset($_POST['id']) ? (int) $_POST['id'] : 0;

if ($borrar > 0) {
   mysql_query('DELETE FROM prueba1 WHERE id = ' . $borrar);
}

//consulta todos los videos
$sql = mysql_query('SELECT * FROM prueba1', $con);

//muestra los datos consultados
$filas = mysql_num_rows($sql);

if ($filas === 0){
   echo 'No hay programación';
}
else {
   
   while ($row = mysql_fetch_array($sql)) {
       echo '<p>', $row['video'], ' - ', $row['dia'], ' - ', $row['hora'], ' - ', $row['duracion'], '</p><br /><a id="boton" data-id="', $row['id'], '" href="#">Borrar</a><br /><br />';
   }
}

Explico un poco lo que quieres hacer, que es algo muy sencillo:

Para conseguir esto usando jquery ajax, se crea un script que escuche el evento click de tu elemento <a>, coger la id del atributo data-id y finalmente hacer la petición a tu archivo php por post, enviando la variable id. El archivo php está esperando una variable id a través de post, cuando llegue simplemente manda una query a mysql solicitando la eliminación del registro indicado.

No te olvides de dejar de usar php mysql y empezar a usar php mysqli con sentencias preparadas.  

Otra vez editando Se me olvidó mencionarte como hacer para eliminar del DOM:

Extendiendo jquery post con done():

Código (javascript) [Seleccionar] Expandir

$('#borrar').on('click', function () {
    var self = $(this),
        id = self.data().id;

    $.post( '/tu_archivo.php', { id: id } )
        .done(function() {
            self.prev('p').remove();
            self.remove();
        });
});

Esto solo vale para el html actual, si cambias el html también tendrás cambiar tu script. Sería más facil si metieras <p> y <a> dentro de un <div>. Así simplemente haces:

Código (javascript) [Seleccionar] Expandir

self.parent().remove();

Así si quieres mejorar tu diseño, no tendrás que cambiar tu script. A menos que pongas <a> dentro de otro elemento 

[SrMcLister]

Muchas gracias por responder gAb1  pero sigue sin funcionar  .
He puesto un echo para ver al menos si llega el post y nada.. el error está en el script y no lo veo.

Código [Seleccionar] Expandir


$('#Borrar').on('click', function () {
    var self = $(this),
        id = self.data().id;

    $.post( 'kame.php', { id: id } )
        .done(function() {
            self.prev('p').remove();
            self.remove();
        });
});

Esto es lo que tengo en scripts.js y claramente en el html tengo un script src hacia él.
y el archivo php está tal como lo arreglaste.
Si pudieras decirme aunque sea sin eliminar del DOM o algo, tan solo necesito borrar el registro.
Aun así muchas gracias por responder

[gAb1]

Incluiste la libreria jquery verdad?   Como no dijiste si ya lo estás usando pues por la duda lo pregunto.

Haz un alert al id y comprueba si se muestra el numero. Si eso está bien, comprueba la variable de php y por último solo quedaría comprobar la query a mysql, correla desde la consola o desde el phpmyadmin y mira ver si se ejecuta.

Todo parece estar en orden en el script, a mí por lo menos me funciona id = self.data().id; https://jsfiddle.net/90vr9zma/


EDITO: Ah ya vi un fallo (a menos que ya lo hayas visto y cambiado): El nombre del id de <a id="boton"> pero en el script puse $('#borrar'); Mira a ver si era eso  

[SrMcLister]

El JSFiddle funciona para 1 registro pero no para muchos, es decir esto no funciona:

Código [Seleccionar] Expandir


<html>
<head>
<title>Prueba1</title>
<script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script language="javascript" type="text/javascript">
//<![CDATA[
window.onload=function(){
$('#Borrar').on('click', function () {
    var self = $(this),
        id = self.data().id;
alert(id);/*
    $.post( '', { id: id } )
        .done(function() {
            self.prev('p').remove();
            self.remove();
        });*/
});
};//]]>
</script>
</head>

<body>
<a id="Borrar" data-id="123" href="#">Borrar</a>
<a id="Borrar" data-id="231" href="#">Borrar</a>
<a id="Borrar" data-id="453" href="#">Borrar</a>
</body>
</html>


Funciona para el primero solo 

[gAb1]

Sorry fallo mio. Id solo se debe usar una vez, en lugar usa class="Borrar" y $('.Borrar') en el script: https://jsfiddle.net/90vr9zma/1/

[SrMcLister]

Grandisimo!! Muchisimas gracias gAb1 
Voy a pasarlo todo a mysqli como me dijiste y adecuar todo un poco