How to delete multiple rows with checkbox using jquery php mysql

Question

index.php:

<head>
<script type="text/javascript" src="script/delete_script.js"></script>
</head>
<body>
    <div class="container">
        <h2>Example: Delete Multiple Rows with Checkbox using jQuery, PHP & MySQL</h2>
        <table id="employee_grid" class="table table-condensed table-hover table-striped bootgrid-table" width="60%" cellspacing="0">

            <thead>
                <tr>
                    <th><input type="checkbox" id="select_all"></th>
                    <th>Name</th>
                    <th>Salary</th>
                    <th>Age</th>
                </tr>
            </thead>

            <tbody>

<?php
include_once('db_connect.php');
$sql = "SELECT id, employee_name, employee_salary, employee_age FROM employee LIMIT 5";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
while( $rows = mysqli_fetch_assoc($resultset) ) {
    ?>

    <tr id="<?php echo $rows["id"]; ?>">
        <td><input type="checkbox" class="emp_checkbox" data-emp-id="<?php echo $rows["id"]; ?>"></td>
        <td><?php echo $rows["employee_name"]; ?></td>
        <td><?php echo $rows["employee_salary"]; ?></td>
        <td><?php echo $rows["employee_age"]; ?></td>
    </tr>

<?php
}
?>

</tbody>
</table>
<div class="row">
    <div class="col-md-2 well">
        <span class="rows_selected" id="select_count">0 Selected</span>
        <a type="button" id="delete_records" class="btn btn-primary pull-right">Delete</a>
    </div>
</div>
</div>

delete_action.php:

include_once("db_connect.php");
if(isset($_POST['emp_id'])) {
    $emp_id = trim($_POST['emp_id']);
    $sql = "DELETE FROM employee WHERE id in ($emp_id)"
    $resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
    echo $emp_id;
}

db_connect.php:

/* Database connection start */
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "betadb";
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());

    exit();
}

delete_script.js:

$(document).on('click', '#select_all', 
    function() {
        $(".emp_checkbox").prop("checked", this.checked);
        $("#select_count").html($("input.emp_checkbox:checked").length+" Selected");
    });

$(document).on('click', '.emp_checkbox', 
    function() {
        if ($('.emp_checkbox:checked').length == $('.emp_checkbox').length) {
            $('#select_all').prop('checked', true);
        } else {
            $('#select_all').prop('checked', false);
        }
        $("#select_count").html($("input.emp_checkbox:checked").length+" Selected");
    }); 
$('#delete_records').on('click', 
    function(e) {
        var employee = [];
        $(".emp_checkbox:checked").each (
            function() {
                employee.push($(this).data('emp-id'));
            });

        if(employee.length <=0) { alert("Please select records."); 
    } else {
        WRN_PROFILE_DELETE = "Are you sure you want to delete "+(employee.length>1?"these":"this")+" row?";
        var checked = confirm(WRN_PROFILE_DELETE);

        if(checked == true) {
            var selected_values = employee.join(",");
            $.ajax({
                type: "POST",
                url: "delete_action.php",
                cache:false,
                data: 'emp_id='+selected_values,
                success: function(response) {

                    var emp_ids = response.split(",");
                    for (var i=0; i < emp_ids.length; i++ ) { $("#"+emp_ids[i]).remove(); } } }); } } });

This is an example code from this link: https://www.phpzag.com/delete-multiple-rows-with-checkbox-using-jquery-php-mysql/

I tried all the steps and tried to debug. But the problem is the select all checkbox wont select all the checkboxes and the delete button also does not work.

Please help me with what's wrong with this code

Answer 1

you need to include jquery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

after that try this code

$( document ).ready(function() {
    /*-------------------
To sleect/deselect all
---------------------- */
$("#select_all").click(function()  {
var status = $(this).is(":checked") ? true : false;    
$('.emp_checkbox').prop('checked', status);
 $("#select_count").html($("input.emp_checkbox:checked").length+" Selected");
});

/*------------------------------
TO select/deselect single check box
------------------------------------- */

$('.emp_checkbox').click(function() {


     var status = $(this).is(":checked") ? true : false;  
    $(this).prop('checked', status);
   $("#select_count").html($("input.emp_checkbox:checked").length+" Selected");
});


$('#delete_records').on('click', 
function(e) {
    var employee = [];
    $(".emp_checkbox:checked").each (
        function() {
            employee.push($(this).data('emp-id'));
        });

    if(employee.length <=0) { alert("Please select records."); 
} else {
    WRN_PROFILE_DELETE = "Are you sure you want to delete "+(employee.length>1?"these":"this")+" row?";
    var checked = confirm(WRN_PROFILE_DELETE);

    if(checked == true) {
        var selected_values = employee.join(",");
        $.ajax({
            type: "POST",
            url: "delete_action.php",
            cache:false,
            data: 'emp_id='+selected_values,
            success: function(response) {

                var emp_ids = response.split(",");
                for (var i=0; i < emp_ids.length; i++ ) { 
              $("#"+emp_ids[i]).remove(); } } }); } } });

       });

http://jsfiddle.net/jceqfhzo/

How to delete multiple rows with checkbox using jquery php mysql

Question

1 answers

solution1
0 2019-04-03 07:47:33

How to delete multiple rows with checkbox using jquery php mysql

Question

1 answers

solution1 0 2019-04-03 07:47:33

solution1
0 2019-04-03 07:47:33