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.js
from 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.
Not working. Can you check the code pls?
I rechecked the code it is working fine.
What issue are you getting?
Great write-up.
I really appreciate the way you have written and explained. Worth reading it.
Thanks for sharing it with us.
Good work..!!