PHP - How To Delete A Multiple Data Using jQuery

Submitted by razormist on Friday, June 30, 2017 - 16:57.

In this tutorial we will try to create a Simple Multiple Deletion Using jQuery. jQuery is a fast, reliable kind of cross-platform javascript library. It is designed to simplify the traditional way of coding in javascript. So let's now do the coding. Before we started: First you have to download & install WAMPserver or any local server that run PHP scripts. Here's the link for WAMP server http://www.wampserver.com/en/. Creating the database Connection This is the where the database connection, just simple copy/paste the provided code below.

<?php
        $conn = new mysqli("localhost", "root", "", "phptut");
        if(!$conn){
                die("Fatal Error: Connection Failed!"); 
        }
?>

The Main Interface This is the where the database connection, just simple copy/paste the provided code below.

<!DOCTYPE html>
<?php require 'connect.php' ?>
 
<html lang = "en">
        <head>
                <meta charset = "UTF-8" name = "viewport" content = "width=device-width, initial-scale=1" />
                <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
                <link rel = "stylesheet" type = "text/css" href = "css/jquery.dataTables.css"/>
        </head>
<body>
        <nav class = "navbar navbar-default">
                <div class = "container-fluid">
                        <a class = "navbar-brand" href = "https://sourecodester.com">Sourcecodester</a>
                </div>
        </nav>
        <div class = "col-md-3"></div>
        <div class = "col-md-6 well">
                <h3 class = "text-primary">PHP - How To Delete A Multiple Data Using jQuery</h3>
                <hr style = "border-top:1px dotted #000;"/>
                <button class = "btn btn-sm btn-danger pull-right" id = "btn_modal"  data-toggle="modal" data-target="#myModal"><span class = "glyphicon glyphicon-remove"></span> DELETE</button>
                <br /><br />
                <table id = "table" class = "table table-bordered">
                        <thead>
                                <tr>
                                        <th>Student ID</th>
                                        <th>Firstname</th>
                                        <th>Lastname</th>
                                        <th>Address</th>
                                        <th></th>
                                </tr>
                        </thead>
                        <tbody>
                                <?php
                                        $query = $conn->query("SELECT * FROM `student`");
                                        while($fetch = $query->fetch_array()){
                                                echo '
                                                <tr id = "'.$fetch['id'].'">
                                                        <td>'.$fetch['student_id'].'</td>
                                                        <td>'.$fetch['firstname'].'</td>
                                                        <td>'.$fetch['lastname'].'</td>
                                                        <td>'.$fetch['address'].'</td>
                                                        <td><input type = "checkbox" name = "student_id[]" class = "delete_student" value = "'.$fetch['id'].'"></td>
                                                </tr>
                                        ';                                              
                                        }
                                ?>
                        </tbody>
                </table>
        </div>
        
        
 
 
 
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
       <h4 class = "text-primary">Are you sure you want to delete all this record?</h4>
      </div>
      <div class="modal-body">
                <div id = "result"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" id = "btn_delete" data-dismiss="modal">Yes</button>
                <button type="button" class="btn btn-success" data-dismiss="modal">No</button>
      </div>
    </div>
 
  </div>
</div>
 
</body>
<script src = "js/jquery-3.2.1.js"></script>
<script src = "js/jquery.dataTables.js"></script>
<script src = "js/bootstrap.js"></script>
<script src = "js/script.js"></script>
<script type = "text/javascript">
        $(document).ready(function(){
                $('#table').DataTable();
        });
</script>
</html>

The Delete Script This is where the code will delete the selected data. To do that just copy/paste the code below.

<?php
        require 'connect.php';
        
        if(ISSET($_POST['id'])){
                foreach($_POST['id'] as $id ){
                        $conn->query("DELETE FROM `student` WHERE `id` = '".$id."'");
                }
        }
        
        
?>

The Result This is where the selected data will display before successfully delete. To do that just copy/paste the code below.

<?php
        require 'connect.php';
        
        if(ISSET($_POST['id'])){
                foreach($_POST['id'] as $id ){
                        $query = $conn->query("SELECT * FROM `student` WHERE `id` = '".$id."'");
                        $fetch = $query->fetch_array();
                        echo '  
                                <h4 class = "alert-danger">'.$fetch['student_id'].' '.$fetch['firstname'].' '.$fetch['lastname'].' '.$fetch['address'].'</h4>
                        ';
                }
        }
?>

The Main Script This is where the multiple of deletion happen. The selected checkbox will display the data then prompt the user for confirmation for the deletion of the data, To do that just simply copy/paste the code below.

$(document).ready(function(){
        
        $('#btn_modal').on('click', function(){
                var id = [];
                
                $('.delete_student:checked').each(function(i){
                        id[i] = $(this).val();          
                });
                
                if(id.length == 0){
                        $('#result').html("");
                        
                }else{
                        $.ajax({
                                url: 'result.php',
                                method: 'POST',
                                data: {id: id},
                                success: function(data){
                                        $('#result').html(data);
                                        
                                }
                        });
                }       
        });
        
        $('#btn_delete').on('click', function(){
                var id = [];
                
                $('.delete_student:checked').each(function(i){
                        id[i] = $(this).val();          
                });
                
                if(id.length == 0){
                        alert("Please Select Check Something");
                        
                }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', '#ff0000');
                                                $('tr#'+id[i]+'').fadeOut(1000);
                                        }
                                        
                                }
                        });
                }       
        });
});

There you have it we created a Simple Multiple Deletion Using jQuery. I Hope that this simple tutorial help you for your need to your project. For more updates and tutorials just kindly visit this site. Enjoy Coding!!!

Add new comment

66 views