Abdul Waheed Abdul Waheed - 1 month ago 8
Ajax Question

How to delete multiple using checkbox with Ajax call

list form
i am trying to delete values with check box using ajax call can any one help me out.

unable to find the error and one nore thing this is a template and i hav a feature of check all inbuilt so do need to change anyinbuilt code for check box
This is my listing form:

<form id="stafflistForm">
<input type="hidden" name="checkedids" value="<?php echo $staffResults['id_staff']; ?>">
<button id="deleteChecked"><i class="fa fa-trash-o"></i></button>
</form>


This my Ajax Script:

<script language="JavaScript">
$("#deleteChecked").click(function()
{
$("#delshowMessageDiv").hide();
$("#delshowMessage").html('');
$.ajax({
url: "staffcontroller.php",
method: "POST",
data: { delData : $("#stafflistForm").serialize(), 'action':'delete'},
dataType: "json",
success: function (response) {
if(response["success"]==true)
{
$("#delshowMessageDiv").hide();
$("#delshowSuccessMessageDiv").show();
$("#delshowSuccessMessage").html(response["message"]);
}else{
$("#delshowMessageDiv").show();
$("#delshowMessage").html(response["message"]);
}
},
error: function (request, status, error) {
$("#hshowMessageDiv").show();
$("#hshowMessage").html("OOPS! Something Went Wrong Please Try After Sometime!");
}
});
return false;
});
</script>


And this is my controller page:

else if($_REQUEST['action']=='delete'){
$delids=explode(",",$_REQUEST["checkedids"]);
$count=count($delids);
for($i=0;$i<$count;$i++)
{
$delQuery= $conn->query("DELETE FROM os_staff WHERE id_staff=".$delids[$i]);
}
if($delQuery){
$response['message'] = "<strong>Success!</strong>Staff Deleted Successfully.";
$response['success'] = true;
}else{
$response['message'] = "<strong>Warning!</strong> Staff Not Deleted.Please Check Carefully..";
$response['success'] = false;
}
echo json_encode($response);
exit;
}

Answer

First of all: Dont use html attribute id if you using it multipli id="deleteChecked". Use class selector or data attribute instead.

Here is a small script which show you how you can improve your code. That should be help you to solve your issue.

$(document).ready(function() {
  
  $('.delete-user').on('click', function(e) {
    // do here your ajax
    
    // this is just example
    $(this).parents('tr').remove();
    
  });
  
});
.fa-trash-o {
  padding: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <form class="stafflistForm">
        <input type="hidden" name="checkedids" value="<?php echo $staffResults['id_staff']; ?>">
        <button class="delete-user"><i class="fa fa-trash-o"></i></button>
      </form>
    </td>
    <td>Tom</td>
  </tr>  
  <tr>
    <td>
      <form class="stafflistForm">
        <input type="hidden" name="checkedids" value="<?php echo $staffResults['id_staff']; ?>">
        <button class="delete-user"><i class="fa fa-trash-o"></i></button>
      </form>
    </td>
    <td>Peter</td>
  </tr> 
  <tr>
    <td>
      <form class="stafflistForm">
        <input type="hidden" name="checkedids" value="<?php echo $staffResults['id_staff']; ?>">
        <button class="delete-user"><i class="fa fa-trash-o"></i></button>
      </form>
    </td>
    <td>Son Goku</td>
  </tr> 
  <tr>
    <td>
      <form class="stafflistForm">
        <input type="hidden" name="checkedids" value="<?php echo $staffResults['id_staff']; ?>">
        <button class="delete-user"><i class="fa fa-trash-o"></i></button>
      </form>
    </td>
    <td>Gozilla</td>
  </tr>   
</table>

Comments