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

Do you have any JS error in the console of your browser? Like... did you import jQuery? — sjahan
– sjahan, Commented Apr 3, 2019 at 7:11
silly question perhaps - have you included the jQuery libraries as in the example code? — Professor Abronsius
– Professor Abronsius, Commented Apr 3, 2019 at 7:15
@justin please make sure console have no error and jquery file loaded or use cdn link to load jquery and debug on click event to check click event working or not demo working very fine all you need to check where is your code not working — Pardeep K
– Pardeep K, Commented Apr 3, 2019 at 7:28
Possible duplicate of How to delete multiple records using php and ajax — Nageen
– Nageen, Commented Apr 3, 2019 at 8:39
Do not follow phpzag.com tutorials! They are advocating bad programming practices and their code samples are full of security problems. Please learn about SQL Injection first. — Dharman
– Dharman ♦, Commented Apr 12, 2019 at 20:57

Shibon · Accepted Answer · 2019-04-03 07:47:33Z

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/

Collectives™ on Stack Overflow

How to delete multiple rows with checkbox using jquery php mysql

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related