PHP MySQL Confirmation Box Before Delete Record Using Ajex Example Tutorial -- ItErrorSolution.com

PHP MySQL Confirmation Box Before Delete Record Using Ajex Example Tutorial

May 08, 2024 | PHP jQuery MySql Bootstrap Javascript Ajax HTML

Hello Dev,

Today, I'll guide you through implementing a confirmation box before deleting an item in PHP. It's crucial to confirm whether the user intends to delete a record or not to ensure they don't accidentally remove important data. In this tutorial, I'll demonstrate how to incorporate a jQuery confirmation popup and dynamically remove items.

Firstly, let's create a "users" table and display all users using Bootstrap for a polished layout. Each user entry will have a delete button. Upon clicking the delete button, a confirmation box will appear asking the user to confirm the deletion. If confirmed, an AJAX request will be triggered to remove the respective record.

For this example, we'll create three simple files:

Would you like further details or explanations on any part?

To add a confirmation box before deleting an item in PHP using jQuery and AJAX, you can follow these steps. This approach ensures that the user confirms their action before any data is deleted, enhancing the safety and reliability of the operation.

Step 1: Database Setup

First, ensure you have a database set up with a table named users. The table structure could look something like this:

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,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

Read Also: Ajax Multiple Image Upload Jquery PHP Example Tutorial Step 2: Database Configuration

Create a db_config.php file to store your database connection details:

db_config.php

<?php
define (DB_USER, "root");
define (DB_PASSWORD, "root");
define (DB_DATABASE, "test");
define (DB_HOST, "localhost");

$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);
?>

Step 3: Delete Script

Create a delete.php file to handle the deletion of records:

delete.php

<?php
require('db_config.php');

if(isset($_GET['id'])){
    $sql = "DELETE FROM users WHERE id=".$_GET['id'];
    $mysqli->query($sql);
    echo 'Deleted successfully.';
}
?>

Read Also: Laravel Ajax File Upload With Progress Bar Example Tutorial Step 4: Display Users and Add Delete Functionality

Create an index.php file to display the users and add the delete functionality with a confirmation box:

index.php

<!DOCTYPE html>
<html>
<head>
    <title>PHP MySQL Confirmation Box Before Delete Record Using Ajex Example Tutorial -- ItErrorSolution.com </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">
    <h3 class="text-center">PHP MySQL Confirmation Box Before Delete Record Using Ajex Example Tutorial -- ItErrorSolution.com</h3>
    <table class="table table-bordered">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Action</th>
        </tr>
        <?php
        require('db_config.php');
        $sql = "SELECT * FROM users";
        $users = $mysqli->query($sql);
        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 btn-sm remove">Delete</button></td>
            </tr>
        <?php }?>
    </table>
</div>

<script type="text/javascript">
    $(".remove").click(function(){
        var id = $(this).parents("tr").attr("id");
        if(confirm('Are you sure to remove this record?')){
            $.ajax({
               url: '/delete.php',
               type: 'GET',
               data: {id: id},
               error: function() {
                  alert('Something is wrong');
               },
               success: function(data) {
                    $("#" + id).remove();
                    alert("Record removed successfully");
                 }
            });
        }
    });
</script>
</body>
</html>

This setup uses Bootstrap for styling and jQuery for handling the AJAX request. When the user clicks the "Delete" button, a confirmation box appears. If the user confirms, the record is deleted from the database, and the row is removed from the table.

Thank you for your encouragement! If you have any questions or need further assistance, feel free to ask. I'm here to help!

Tags :

#PHP

#jQuery

#MySql

#Bootstrap

#Javascript

#Ajax

#HTML

ItErrorSolution.com

"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"