Adding and deleting a row from SQL database using Ajax and JQuery

Question

I have a PHP snippet that generates a table and fills it, and adds a delete button at the end of each row.

while($row = mysql_fetch_array($result)){
$num=$row['id'];
echo "<td>".$row['id']."</td>";
echo "<td>".$row['name']."</td>";
echo "<td>".$row['lastname']."</td>";
echo "<td>".$row['adress']."</td>";
echo "<td>".$row['phonenumber']."</td>";
echo "<td><form action='delete.php' method='post'><button type='submit' value=$num name='deleteId'>delete</button></form></td>";
echo "</tr>";   
}

The delete.php file is this one :

<?php
$host="localhost"; 
$username="root"; 
$password=""; 
$db_name="students";

mysql_connect("$host", "$username", "$password"); 
mysql_select_db("$db_name");

$id = $_POST['deleteId'];

$sql="DELETE FROM students WHERE id='$id'";
$result=mysql_query($sql);
?>

I want to do this using Ajax asynchronously, ie. I don't want my page to refresh. Tried a million ways, yet it fails each time. Thanks in advance.

your may want to read this: don't use mysql_* functions. And could you perhaps add the ajax code that you have tired so that we can see where you have possibly gone wrong — Michael Doye
– Michael Doye, Commented Mar 18, 2015 at 15:40
We do not see any javascript here. What have you tried then? — David Soussan
– David Soussan, Commented Mar 18, 2015 at 15:41
The problem with your query is the quotes around the $id: it is an integer and does not need, or work with those quotes. If you do not want to get marked down for this question, show what javascript you have tried. — David Soussan
– David Soussan, Commented Mar 18, 2015 at 15:43

Hayden Schiff · Accepted Answer · 2015-03-18 15:46:08Z

1

Instead of using a form, you need to write your own JavaScript to handle the server call. Here's one way to do it. Make your PHP look something like this:

while($row = mysql_fetch_array($result)){
$num=$row['id'];
echo "<td>".$row['id']."</td>";
echo "<td>".$row['name']."</td>";
echo "<td>".$row['lastname']."</td>";
echo "<td>".$row['adress']."</td>";
echo "<td>".$row['phonenumber']."</td>";
echo "<td><button onclick="deleteStudent($num)">delete</button></td>";
echo "</tr>";   
}

And then have a JS function that looks something like this:

function deleteStudent(studentId) {
    $.ajax({
      url: "delete.php",
      method: 'post',
      data: {
        deleteId: studentId
      }
    });
}

answered Mar 18, 2015 at 15:46

Hayden Schiff

3,33022 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lozy219 · Accepted Answer · 2015-03-18 16:02:41Z

1

Another way: Firstly, assign a unique ID for each of the delete button.

while($row = mysql_fetch_array($result)){
    $num = $row['id'];
    echo "<td>".$row['id']."</td>";
    echo "<td>".$row['name']."</td>";
    echo "<td>".$row['lastname']."</td>";
    echo "<td>".$row['adress']."</td>";
    echo "<td>".$row['phonenumber']."</td>";
    echo "<td><button id='delete-" . $row['id'] . "'>delete</button></td>";
    echo "</tr>";   
}

Then use jQuery:

$('button[id^="delete"]').click(function () {
    var id = $(this).attr('id').substr(6);
    $.ajax({
      type: "POST",
      url: "delete.php",
      data: {deleteId: id}
    });
});

answered Mar 18, 2015 at 16:02

lozy219

5714 silver badges18 bronze badges

Collectives™ on Stack Overflow

Adding and deleting a row from SQL database using Ajax and JQuery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related