PHP MySQL confirmation box before delete record using jquery ajax

When “PHP MySQL confirmation box before delete record using jquery ajax” moves through design, development and browser testing, the linked resource can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

Hi Guys,

In this tutorial,I will learn you how to use confirmation alert before delete record with jquery ajax.you can easy and simply use confirmation alert before delete record with jquery ajax.

Today, i will show you how to add confirm box before delete item in php. It's always necessary to confirm yes or no about that removing record. If we confirm before delete records it's safe to client that delete right records. So in this post i will show you how to add confirmation popup of jquery and remove item dynamically.

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

Step 2: Configuration

Create a config.php file for the database configuration.

<?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());
}

Step 3: Download & Include

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>

Step 4: HTML & PHP

Fetch records from posts table and list in the table.

<?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>

Step 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.

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

Step 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.

$(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.');
	     }
           }
         });
       }

 
    });

 
  });
});

It will help you...