Deleting multiple items using checkboxes in PHP using ajax or jquery

Question

I am trying to delete multiple items in the database table using checkbox. I did this with PHP, but now I want to do it with javascript so it will not refresh the page. How can I amend my code below so it will delete multiple items without refreshing page?

HTML

<div id="msg"></div>
<form>
  <input type="checkbox" id='remove[]-<?php echo $item_id;?>' name="remove[]" value="<?php echo $item_id; ?>" />
  <button class="btn btn-danger" id="del_btn" type="submit" name="delete" 
      onclick='return del(<?php echo $item_id;?>)'><b>DELETE</b></button>
</form>

JAVASCRIPT

 function del(item_id){
    $.ajax({
        type:"post",
        url:"delete_form.php",
        data: { 
            id: item_id, 
            name: $('#remove[]-'+item_id).val() 
        },
        cache:false,
        success: function(html){
            $('#msg').html(html);
         }
        });
        $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
}

PHP

foreach ((array) $_POST['remove'] as $remove_id) {
    $delete_item = "delete from products where item_id='$remove_id'";
    $run_delete = mysqli_query($con, $delete_item);
    if ($run_delete){
        echo "<h3> was deleted successfully</h3>";
    }
}

Just loop through all the ticked boxes when you hit the onclick, then sent it to the PHP file — ProEvilz, Sep 20 '17 at 16:19

score 0 · Answer 1 · answered Sep 20 '17 at 16:54

Try to loop in your js to get an array of ids.

 var array = [];
   $.each($(inputclass),function(a){
   if($(this).is(':checked')===true){
     array.push($(this).val());
    }
  }

Then in the parameter of the ajax call, send it.

In php recive it and loop the values making the delete.

Mikey · Answer 2 · 2017-09-20T17:17:23.693

Your code doesn't quite make sense as you are passing only one item in your JavaScript, but looping and deleting multiple items in your PHP.

If you have a form like

<form>
    <!-- id is useless IMO -->
    <input type="checkbox" name="remove[]" value="1" />
    <input type="checkbox" name="remove[]" value="2" />
    <!-- etc -->
    <!-- change type to button to prevent the form from submitting -->
    <button type="button" class="btn btn-danger" id="del_btn"><b>DELETE</b></button>
</form>

Attach an onclick event handler to your button. Simply serialize your form to get the "checked" checkboxes.

$('#del_btn').click(function () {
    $.post("delete_form.php", $(this).closest('form').serialize(), function (html) {
        $('#msg').html(html);
    });
});

In your PHP, instead of looping, use one query using IN operator

$ids = $_POST['remove'];
$in = implode(', ', $ids); // [1, 2, 3] becomes '1, 2, 3'
$sql = "DELETE FROM products WHERE item_id IN ($in)";

if (mysqli_query($con, $sql)) {
    echo "<h3> was deleted successfully</h3>";
} else {
    echo "<h3> something went wrong</h3>";
}

Aside: your code is vulnerable to SQL injection, so you should probably validate the data received before running your SQL.

Thank for your response. Your code works, but it seems not to be stable. Sometimes if I click the Delete button the form disappears without deleting anything, sometimes it will delete the item and echo deleted. Do you know what could be causing this? — Oponjous, Sep 20 '17 at 19:23
@Oponjous You copied the code **exactly** as shown above (nothing more, nothing less) ? Open your browser's console log and see if any errors show up after you click on the button. Turn on [PHP error reporting](https://stackoverflow.com/a/5438125/1022914) at the top of your PHP file as well. Ensure your jQuery is [correctly placed](https://learn.jquery.com/about-jquery/how-jquery-works/) in the document. — Mikey, Sep 20 '17 at 19:35

Deleting multiple items using checkboxes in PHP using ajax or jquery

2 Answers2