CODEWITHSUNDEEP
javascriptphpmysqlajaxmaterialize
David Sélem Garcia
David Sélem Garcia

Reputation: 89

How to delete a row using php + html + ajax?

I've been trying to delete a row from a HTML table. I'm using Materialize CSS

This is what I got, the ID is the employee ID Html table, populated with mysql

And this is the code

<?php 
  $server = mysql_connect("localhost", "root", ""); 
  mysql_set_charset('utf8', $server);
  $db = mysql_select_db("cursos", $server);
  $query = mysql_query("SELECT * FROM empleados"); 
?>

         <table class="bordered responsive-table highlight">
             <thead>
            <tr>
                <th>ID</th>
                <th>Nombre</th>
                <th>Apellidos</th>
                <th>Cumpleaños</th>
                <th>Género</th>
                <th>Nacionalidad</th>
                <th>Despedir</th>
            </tr>
</thead>
            <?php
               while ($row = mysql_fetch_array($query)) {
?>
             <tbody>
                    <tr>
                        <td><?php echo $row['empleado_id']; ?></td>
                        <td><?php echo $row['nombre']; ?></td>
                        <td><?php echo $row['apellidos']; ?></td>
                        <td><?php echo $row['fecha_nac']; ?></td>
                        <td><?php echo $row['genero']; ?></td>
                        <td><?php echo $row['nacionalidad']; ?></td>
                            <?php

                            $empleado_id = $row['empleado_id'];                         
                                    ?>
                        <td><a id="<?php echo $empleado_id; ?>" name="borrar" class="btn-floating btn-small waves-effect waves-light red"><i class="material-icons">delete</i></a></td>
                    </tr>
             </tbody>
    <?php
               }

            ?>
        </table>

I want to be able to click that red button and to send the query to the SQL.

So far this is what I have

<td><a id="<?php echo $empleado_id; ?>" name="borrar" class="btn-floating btn-small waves-effect waves-light red"><i class="material-icons">delete</i></a></td>

By using the id="<?php echo $empleado_id; ?>", the ID of the red button it's always going to be the employee ID.

How can I pass the button ID to a function that will do the query?

Upvotes: 0

Views: 164

Answers (1)

Harkal
Harkal

Reputation: 1828

set onClick property in the a tag like this :

<td><a onClick="deletThis(this.id)" id="<?php echo $empleado_id; ?>" name="borrar" class="btn-floating btn-small waves-effect waves-light red"><i class="material-icons">delete</i></a></td>

now at the end of the file in the script tag make the following function

<script>
   function deletThis(employeeId){
      //for surity if the value ir right u can chech in console
      console.log(employeeId);
      //now make an AJAX request to your file let's say delete.php
      $.post("./delete.php",
         {
           employeeId : employeeId
         },
         function(response, status){
             console.log(response);
         });
      }
</script>

now make a file delete.php in parallel with this file and write your php code to delete the entry something like this

<?php

   $employeeId = $_POST['employeeId'];

   //delte from db

?>

Upvotes: 1

Related Questions