Deleting a Record from MySQL Using Ajax - php

Question

There's something wrong with my codes and I'm unable to run it successfully. When I debug my Ajax code using Google Developer tools, Ajax data parameter has the value of the primary key (uid) but it seems it doesn't send POST request to delete.php. I've no idea what the problem is.
Thanks for your helps and suggestions in advance!
index.php: Press Delete Button to Fire Ajax Code
<tbody>
<!--Populate HTML Table-->
<?php if(!empty($records)) {
foreach ($records as $record) {
?>
<tr>
<td data-target="rowNum"></td>
<td data-target="userId" style="display: none;">
<?php echo $record['uid']; ?>
</td>
<td data-target="firstname"><?php echo $record['first_name']; ?></td>
<td data-target="lastname"><?php echo $record['last_name']; ?></td>
<td data-target="emailaddress"><?php echo $record['email_address']; ?></td>
<td>
<button class="btnEdit">Edit</button>
<!--Press Delete Button to Fire Ajax Code-->
<button class="btnDelete">Delete</button>
</td>
</tr>
<?php } ?>
<?php } ?>
</tbody>
Ajax Code: Send userId (Table Primary Key) as Data to Delete.php
$(document).ready(function(){
$(".btnDelete").click(function(){
var userId = $(this).closest("tr").children("td[data-target=userId]").text();
$.ajax({
url: "delete.php",
type: "POST",
data: userId
});
});
});
delete.php:
<?php
include 'database.php';
$conn->query("DELETE FROM Users WHERE uid = '$_POST['userId']'");
?>

Answer 1

You pass your data like this:
$.ajax({
url: "delete.php",
type: "POST",
data: userId
});
userId value is probably just a scalar without key that you're trying to use in delete.php. So change this code to:
$.ajax({
url: "delete.php",
type: "POST",
data: { userId: userId }
});
and it should work.

Answer 2

this might help, you are send data as text.
$(document).ready(function(){
$(".btnDelete").click(function(){
var userId = $(this).closest("tr").children("td[data-target=userId]").text();
$.ajax({
url: "delete.php",
type: "POST",
contentType: 'text/plain'
data: {userId:userId}
});
});
});

Answer 3

You can probably get it to run the way you are trying to but here's a way that makes a bit more sense to me:
<tbody>
<!--Populate HTML Table-->
<?php if(!empty($records)) {
foreach ($records as $record) {
?>
<tr>
<td data-target="rowNum"></td>
<td data-target="firstname"><?php echo $record['first_name']; ?></td>
<td data-target="lastname"><?php echo $record['last_name']; ?></td>
<td data-target="emailaddress"><?php echo $record['email_address']; ?></td>
<td>
<button class="btnEdit">Edit</button>
<!--Press Delete Button to Fire Ajax Code-->
<form class="deleteForm" method="POST">
<input type="hidden" name="userId" value="<?= $record['uid'] ?>" />
<button type="submit" class="btnDelete">Delete</button>
</form>
</td>
</tr>
<?php } ?>
<?php } ?>
</tbody>
Then in JavaScript
$(document).ready(function(){
$(".deleteForm").on('submit', function(){
var data = $(this).serialize(); // Let jQuery prepare the data
$.ajax({
url: "delete.php",
type: "POST",
data: data
});
return false; // Cancel default
});
});
Lastly:
<?php
include 'database.php';
$userId = filter_input(INPUT_POST, 'userId', FILTER_VALIDATE_INT); //Assuming an ID is an int, in general be cautions of SQL injection.
if ($userId) {
$conn->query("DELETE FROM Users WHERE uid = '$_POST['userId']'");
} else {
http_response_code(400); // Missing the input
die();
}
?>