Tuesday, March 9, 2021

How to Delete multiple records with checkboxes using AJAX


 Step1:- We need to be able to connect to the server,

db.php

<?php

$con = mysqli_connect("localhost","root","","test");

?>

Step2:- 

index.php

<?php

include('db.php');

$res = mysqli_query($con,"select * from users");

?>

<!DOCTYPE html>

<html lang="en">

<head>

  <link rel="stylesheet" href="css/bootstrap.min.css">

  <script src="jquery.min.js"></script>

  <style type="text/css">

    .button {

      display: inline-block;

      background-color: #f44336;

      color: #FFFFFF;

      padding: 14px 25px;

      text-align: center;

      text-decoration: none;

      font-size: 16px;

      margin: 20px 0px;

      opacity: 0.5;

      pointer-events: none;

    }

    .button:hover {

      background-color: #f44336;

      color: white;

      text-decoration: none;

    }

    .table .thead-green th {

      color: #fff;

      background-color: #37b535;

      border-color: #ffffff;

    }

    .table {

      width: 43%;

    }

  </style>

</head>

<body>

<div class="container">

  <h2>PHP Ajax Delete Data Using Checkbox</h2>

  <a href="javascript:void(0)" onclick="delete_all()" class="button">Delete</a>

  <form method="post" id="frm">

    <table class="table">

      <thead class="thead-green">

        <tr>

          <th><input type="checkbox" name="" onclick="select_all()" id="delete"></th>

          <th>Id</th>

          <th>Name</th>

        </tr>

      </thead>

      <tbody>

        <?php

          while ($row = mysqli_fetch_assoc($res)) {

        ?>

        <tr id="box<?php echo $row['id']?>">

          <td><input type="checkbox" name="checkbox[]" id="<?php echo $row['id']?>" value="<?php echo $row['id']?>"></td>

          <td><?php echo $row['id']?></td>

          <td><?php echo $row['name']?></td>

        </tr>

      <?php } ?>

      </tbody>

    </table>

  </form>

 

</div>

<script type="text/javascript">

  function select_all() {

    //select all checkbox

    $('input[type=checkbox]').each(function(){

      //console.log(this.id);//get all ids

      $('.button').css({'opacity': 'inherit','pointer-events':'auto'})

      if($('#delete').prop('checked')){

        $('#'+this.id).prop('checked',true);

      }

      else{

        $('.button').css({'opacity': '0.5','pointer-events':'none'})

        $('#'+this.id).prop('checked',false);

      }

    });

  }

   //For only one check box

  $('[name="checkbox[]"]').change(function(){

    if ($(this).is(':checked')) {

      $('.button').css({'opacity': 'inherit','pointer-events':'auto'})

    }

    else{

      $('.button').css({'opacity': '0.5','pointer-events':'none'})

    }

  });


function delete_all(){

  //comfirm box

  var check = confirm('Are you sure?');

  if(check == true){

    $.ajax({

      url:'delete.php',

      type:'post',

      data:$('#frm').serialize(),

      success:function(result){

        //delete all data remove in front end.

        $('input[type=checkbox]').each(function(){

          if($('#'+this.id).prop('checked')){

            $('#box'+this.id).remove();

          }

        });

      }

    });

  }

}

</script>

</body>

</html>


Step3:-

delete.php

<?php

include('db.php');

// echo"<pre>";

// print_r($_POST);

if(isset($_POST['checkbox']['0'])) {

  foreach ($_POST['checkbox'] as $list) {

    $id = mysqli_real_escape_string($con,$list);

    mysqli_query($con,"delete from users where id='$id'");

  }

}

?>

No comments:

Post a Comment

If you have any problem please let me know.