Confirmation alert Before Delete record using jQuery Ajax, PHP and MySQL

6345 views 1 year ago jQuery

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 laravelcode;

And use this database.

USE laravelcode;

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, "laravelcode");
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.

Author : Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]