Create confirmation alert before delete record with jQuery Ajax, PHP and MySQL
While creating web application, it is always good to allow user confirm before doing any action. Specially on delete action, because if user accidently clicks on wrong delete button, then the data may not be removed from database.
So in this article, we will work on how to create confirmation alert box before delete action. We will use bootstrap for general view and jQuery to create Ajax request.
Follow this article on how to ask for confirmation before delete the record. First of all, we will create database in MySQL.
CREATE DATABASE hackthestuff;
And use this database.
USE hackthestuff;
Create users table with bellow SQL command.
CREATE TABLE `users` (
`id` int(10) UNSIGNED NOT NULL,
`name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
Now insert some data manually so we can display record for deletion.
This is our database setup. Now we will proceed for code files. First create project folder and create bellow mentioned files in that project folder.
Create config.php
file for database connection.
<?php
define (DB_USER, "root");
define (DB_PASSWORD, "root");
define (DB_DATABASE, "hackthestuff");
define (DB_HOST, "localhost");
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);
Now create index.php
file for users view list. First put this codes to get users records.
<?php
require('config.php');
$sql = "SELECT * FROM users";
$users = $mysqli->query($sql);
?>
Also include bootstrap.min.css
and jquery.min.js
CDN files in the <head> tag.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Now render all users record in the table with bellow HTML and PHP code lines.
<table class="col-md-6 table table-bordered">
<tr>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
<?php
while($user = $users->fetch_assoc()) {
?>
<tr id="<?php echo $user['id'] ?>">
<td><?php echo $user['name'] ?></td>
<td><?php echo $user['email'] ?></td>
<td><button class="btn btn-danger remove-record">Delete</button></td>
</tr>
<?php } ?>
</table>
Also we need some jQuery code to create Ajax request to delete the record.
<script type="text/javascript">
$(".remove-record").click(function(){
var id = $(this).parents("tr").attr("id");
if(confirm('Are you sure to delete this record ?')) {
$.ajax({
url: 'delete.php',
type: 'GET',
data: {id: id},
error: function() {
alert('Something is wrong, couldn\'t delete record');
},
success: function(data) {
$("#" + id).remove();
alert("Record delete successfully.");
}
});
}
});
</script>
Here is the full index.php
file.
<?php
require('config.php');
$sql = "SELECT * FROM users";
$users = $mysqli->query($sql);
?>
<!DOCTYPE html>
<html>
<head>
<title>Confirm before delete record</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<h3 class="text-center">Confirm before delete record</h3>
<br>
<table class="col-md-6 table table-bordered">
<tr>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
<?php
while($user = $users->fetch_assoc()) {
?>
<tr id="<?php echo $user['id'] ?>">
<td><?php echo $user['name'] ?></td>
<td><?php echo $user['email'] ?></td>
<td><button class="btn btn-danger remove-record">Delete</button></td>
</tr>
<?php } ?>
</table>
</div>
</div>
<script type="text/javascript">
$(".remove-record").click(function(){
var id = $(this).parents("tr").attr("id");
if(confirm('Are you sure to delete this record ?')) {
$.ajax({
url: 'delete.php',
type: 'GET',
data: {id: id},
error: function() {
alert('Something is wrong, couldn\'t delete record');
},
success: function(data) {
$("#" + id).remove();
alert("Record delete successfully.");
}
});
}
});
</script>
</body>
</html>
In the last step, we will create delete.php
file which will process the Ajax request and delete the record.
<?php
require('config.php');
if(isset($_GET['id'])) {
$sql = "DELETE FROM users WHERE id=".$_GET['id'];
$mysqli->query($sql);
echo 'Record deleted successfully.';
}
That's it. Now run the project from the Terminal with bellow command and open in browser.
php -S 0.0.0.0:8000
I hope this article will help you in your web project. For this type of simple articles and latest updates, follow us on Twitter and like our Facebook page.
Copyright 2023 HackTheStuff