Friday, 1 April 2016

Ajax Delete multiple data with checkboxes in PHP Jquery Mysql

           , , ,      23 comments   



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. freethinker4 April 2016 at 05:02

    Great work!!!

    ReplyDelete
  2. Unknown14 April 2016 at 10:39

    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
  3. Badrah7 March 2018 at 16:25

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

    ReplyDelete
  4. Badrah7 March 2018 at 16:26

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

    ReplyDelete
  5. Unknown8 March 2018 at 03:08

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

    ReplyDelete
  6. Dany12 April 2018 at 02:13

    Not work!

    ReplyDelete
  7. Gaurav Sontakke8 June 2018 at 21:29

    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
  8. Unknown16 July 2018 at 14:28

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

    ReplyDelete
  9. Unknown16 July 2018 at 14:29

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

    ReplyDelete
  10. Unknown31 August 2018 at 00:16

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

    ReplyDelete
  11. SMOS7 November 2018 at 23:24

    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
  12. Unknown16 November 2018 at 03:29

    It's not working

    ReplyDelete
  13. Abid's blog Trailer30 January 2019 at 07:24

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

    ReplyDelete
  14. Angelo Javier1 June 2019 at 05:08

    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
  15. Thenmozhi16 June 2019 at 23:56

    it's working..thanks..

    ReplyDelete
  16. Anonymous15 October 2019 at 22:52

    its work but how to check all

    ReplyDelete
  17. Unknown2 December 2019 at 00:14

    Not working!!!

    ReplyDelete
  18. Unknown2 December 2019 at 00:19

    bad code!!! not posting data

    ReplyDelete
  19. Anonymous31 May 2020 at 01:42

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

    ReplyDelete
  20. Jay Rathod22 June 2020 at 05:23

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

    ReplyDelete
  21. Unik Page Blog1 April 2021 at 11:01

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

    ReplyDelete