It is safe to display a confirmation alert before deleting a record from the MySQL database table.
If the user has accidentally clicked the delete button on the wrong record then it has a choice whether to delete or cancel it.
Confirm box can easily add using confirm() method.
But in this tutorial, I am using the Bootstrap Bootbox.js library to display the confirm box.
With jQuery AJAX delete a record from the MySQL database with PHP on the confirmation.
Contents
1. Table structure
I am using posts table in the example and added some records.
CREATE TABLE `posts` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `title` varchar(200) NOT NULL, `content` text NOT NULL, `link` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
2. Configuration
Create a config.php file for the database configuration.
Completed Code
<?php
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
3. Download & Include
- Download
Bootbox.jsfrom here. - Include with Bootstrap and jQuery library.
<link href='bootstrap/css/bootstrap.min.css' rel='stylesheet' type='text/css'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src='bootstrap/js/bootstrap.min.js'></script> <script src='bootbox.min.js'></script>
4. HTML & PHP
Fetch records from posts table and list in the <table>.
Add a delete button <button class='delete'> on each row where use the $id to set id attribute value del_<?= $id ?>.
Completed Code
<?php
include "config.php";
?>
<div class='container'>
<table border='1' class='table'>
<tr style='background: whitesmoke;'>
<th>S.no</th>
<th>Title</th>
<th>Operation</th>
</tr>
<?php
$query = "SELECT * FROM posts";
$result = mysqli_query($con,$query);
$count = 1;
while($row = mysqli_fetch_assoc($result) ){
$id = $row['id'];
$title = $row['title'];
$link = $row['link'];
?>
<tr>
<td align='center'><?= $count ?></td>
<td><a href='<?= $link ?>' target='_blank'><?= $title ?></a></td>
<td align='center'>
<button class='delete btn btn-danger' id='del_<?= $id ?>' data-id='<?= $id ?>' >Delete</button>
</td>
</tr>
<?php
$count++;
}
?>
</table>
</div>
5. PHP
Create a new ajaxfile.php file.
Check if 'id' is POST or not. If POST then prepares DELETE query to delete a record from posts table by id and return 1.
If 'id' is not POST then return 0.
Completed Code
<?php
include "config.php";
if(isset($_POST['id'])){
$id= $_POST['id'];
$sql = "DELETE FROM posts WHERE id=".$id;
mysqli_query($con,$sql);
echo 1;
exit;
}
echo 0;
exit;
6. jQuery
On the button click assign this to el variable and get delete id from data-id attribute..
Show confirmation box by calling bootbox.confirm() method.
If clicked on the OK button then send an AJAX to delete a record.
On successful callback if response == 1 then remove <tr>.from <table > otherwise display alert message using bootbox.alert().
Completed Code
$(document).ready(function(){
// Delete
$('.delete').click(function(){
var el = this;
// Delete id
var deleteid = $(this).data('id');
// Confirm box
bootbox.confirm("Do you really want to delete record?", function(result) {
if(result){
// AJAX Request
$.ajax({
url: 'ajaxfile.php',
type: 'POST',
data: { id:deleteid },
success: function(response){
// Removing row from HTML Table
if(response == 1){
$(el).closest('tr').css('background','tomato');
$(el).closest('tr').fadeOut(800,function(){
$(this).remove();
});
}else{
bootbox.alert('Record not deleted.');
}
}
});
}
});
});
});
7. Demo
8. Conclusion
If you are not using Bootstrap on your webpage then use confirm() method. Send your AJAX request to delete the record when confirm() method returns true.
