Friday 1 April 2016

Ajax Delete multiple data with checkboxes in PHP Jquery Mysql




In this post I show you delete multiple records from mysql database on the basis of selected checkbox in php. You have show lots of tutorial on this things but today I have show you how to use Ajax and JQuery for delete multiple records on the basis of checked checkboxes on one single click without page refresh. When user want to remove multiple table show he can checked checkbox of that table row and click on delete button when system will ask you do you want to delete this records if he click yes then it again validate that use has checked check box or not if he not select any check box then system will again display alert message regarding please select atleast one checkbox and if user has select one or multiple checkboxes then user can remove multiple table row with background color change and fade out effect with out page refresh. For this things I have used ajax function call in jquery code. With help of Ajax it execute delete code from delete.php file. So, this is my tutorial on how to use Ajax to delete Multiple records from database with change background color of table and fade out effect without page refresh.



Source Code


index.php


<?php
//index.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM tbl_customer";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
 <head>
  <title>Webslesson Tutorial</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  
  <style>
   #box
   {
    width:600px;
    background:gray;
    color:white;
    margin:0 auto;
    padding:10px;
    text-align:center;
   }
  </style>
 </head>
 <body>
  <div class="container">
   <br />
   <h3 align="center">Delete multiple rows by selecting checkboxes using Ajax Jquery with PHP</h3><br />
   <?php
   if(mysqli_num_rows($result) > 0)
   {
   ?>
   <div class="table-responsive">
    <table class="table table-bordered">
     <tr>
      <th>Customer Name</th>
      <th>Customer Address</th>
      <th>Delete</th>
     </tr>
   <?php
    while($row = mysqli_fetch_array($result))
    {
   ?>
     <tr id="<?php echo $row["CustomerID"]; ?>" >
      <td><?php echo $row["CustomerName"]; ?></td>
      <td><?php echo $row["Address"]; ?></td>
      <td><input type="checkbox" name="customer_id[]" class="delete_customer" value="<?php echo $row["CustomerID"]; ?>" /></td>
     </tr>
   <?php
    }
   ?>
    </table>
   </div>
   <?php
   }
   ?>
   <div align="center">
    <button type="button" name="btn_delete" id="btn_delete" class="btn btn-success">Delete</button>
   </div>
 </body>
</html>

<script>
$(document).ready(function(){
 
 $('#btn_delete').click(function(){
  
  if(confirm("Are you sure you want to delete this?"))
  {
   var id = [];
   
   $(':checkbox:checked').each(function(i){
    id[i] = $(this).val();
   });
   
   if(id.length === 0) //tell you if the array is empty
   {
    alert("Please Select atleast one checkbox");
   }
   else
   {
    $.ajax({
     url:'delete.php',
     method:'POST',
     data:{id:id},
     success:function()
     {
      for(var i=0; i<id.length; i++)
      {
       $('tr#'+id[i]+'').css('background-color', '#ccc');
       $('tr#'+id[i]+'').fadeOut('slow');
      }
     }
     
    });
   }
   
  }
  else
  {
   return false;
  }
 });
 
});
</script>

delete.php


<?php
//delete.php
$connect = mysqli_connect("localhost", "root", "", "testing");
if(isset($_POST["id"]))
{
 foreach($_POST["id"] as $id)
 {
  $query = "DELETE FROM tbl_customer WHERE CustomerID = '".$id."'";
  mysqli_query($connect, $query);
 }
}
?>

23 comments:

  1. can you make a tutorial on , auto complete . example i have an id number and then , if I enter my Id number on first input field , then my other information will automatically fill those input fields without refreshing the page XD , can you help me Sir plss...

    ReplyDelete
  2. It not work for me :(
    I not delete the data from mysql

    ReplyDelete
  3. It not working with me:(
    The data not deleting from mysql

    ReplyDelete
  4. Why if we change the name of 'Var id' and the other 'id', the success function not working?

    ReplyDelete
  5. I follow ur tutorial but i have an error , When i delete it was not deleted row until i refresh my page. I copy ur code also still i get error also. And row is not fadedOut also with backgroundcolour. Please try to solve my problem. Thanks

    ReplyDelete
  6. Hey, I had a problem with transition, could you help me ?

    ReplyDelete
  7. Hey. I got problem with transition, could you help me with that issue ?

    ReplyDelete
  8. can i insert into another table with these record by selecting the value

    ReplyDelete
  9. Nice work. I'm just having issues refreshing data that has been posted using Ajax. The post is successfully being executed, but the data on the view does not get refreshed with the new data.

    ReplyDelete
  10. working ... but after delete row … same data not deleted in phpmyadmin page … what is reason?

    ReplyDelete
  11. Instead of deleting the selected rows, I would like to INSERT to a new table in the database, say selected_customers, the rows I selected in this example. Do you have a source code/example for that? That will be much appreciated.

    ReplyDelete
  12. its work but how to check all

    ReplyDelete
  13. bad code!!! not posting data

    ReplyDelete
  14. Thank you soooo much for this...really helpful!

    ReplyDelete
  15. working ... but after delete row … same data not deleted in phpmyadmin page … what is reason? SAME PROBLEM BRO

    ReplyDelete
  16. It worked flawlessly for me.. It deleted the data both on the table and the phpadmin. Great video and great job.

    ReplyDelete