//Check boxes Function 
    $(function() {
        //If check_all checked then check all table rows
        $("#check_all").on("click", function () {
             if ($("input:checkbox").prop("checked")) {
                  $("input:checkbox[name='row-check']").prop("checked", true);
             } else {
                  $("input:checkbox[name='row-check']").prop("checked", false);
             }
        });

        // Check each table row checkbox
        $("input:checkbox[name='row-check']").on("change", function () {
             var allchkbx = $("input:checkbox[name='row-check']").length;
             var ttchkbx = $("input:checkbox[name='row-check']:checked").length;

             // If all checked manually then check check_all checkbox
             if (allchkbx === ttchkbx) {
                  $("#check_all").prop("checked", true);
             }
             else {
                  $("#check_all").prop("checked", false);
             }
        });
        
        $("#sendall").on('click', function() {
             var array = [];
             $("input:checked").each(function() {
                  array.push($(this).val());
             });
             
            //  console.log(array); //debug log
             $('#sendall_Modal').modal('show'); 
                  $('#sendall_form').on("submit", function(event){  
                       event.preventDefault();
                            var dbarray = JSON.stringify(array);
                            // console.log(dbarray);
                            $.ajax({  
                                 url:"../../bl/office/sendall.php",  
                                 method:"POST",  
                                 data:{dbarray:dbarray}, 
                                 cache:false, 
                                 success:function(data){  
                                      $('#sendall_form')[0].reset();
                                      $('#sendall_Modal').modal('hide');
                                 },
                            }); 
                       
             });
        });
   });

I am using this code to pass message ids to a php script that is then used to send SMS to client phone numbers by selecting the messages with the passed ids. My code works fine when I use check all and reload my page. However if I select records from the same table without reloading the code above will first pass the previously selected records to the php script then pass the newly selected records.

When I click send with all records checked my dev tools will show one request to the sendall.php script.

If I uncheck all and check afew boxes dev tools will show two requests, the first one with all records and the second one with the fewer records.

How do i ensure only one request to sendall.php after unchecking?

here is my sendall.php script

$data = json_decode(stripslashes($_POST['dbarray']));


if ($data[0] == "on"){
    foreach(array_slice($data,1) as $d){
        $query = "SELECT msisdn, message FROM off_texts where id=$d";
        $result = mysqli_query($conn, $query);
        $rows = mysqli_fetch_assoc($result);
        $phoneno = $rows['msisdn'];
        $text = $rows['message'];

    }
}
else {
    foreach(array_slice($data,0) as $d){
        $query = "SELECT msisdn, message FROM off_texts where id=$d";
        $result = mysqli_query($conn, $query);
        $rows = mysqli_fetch_assoc($result);
        $phoneno = $rows['msisdn'];
        $text = $rows['message'];
    }
};

Here is my modal html

    <div id="sendall_Modal" class="modal fade">  
        <div class="modal-dialog">  
            <div class="modal-content">  
                <div class="modal-header"> 
                        <h5 class="modal-title" id="modal-title"></h5>  
                        <button type="button" class="btn-close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close"></button>
                        <h5 class="modal-title" id="modal-title"></h5> 
                        
                </div>  
                <div class="modal-body">  
                        <form id="sendall_form">
                            <label>Confirm:</label>
                              
                            <p> Are you sure you want to send these Messages? </p>
                            <br /> 
                            
                            <input type="submit" name="ainsert" id="ainsert" value="Send" class="btn btn-success" />  
                        </form>  
                </div>  
                <div class="modal-footer">  
                        <button type="button" class="btn btn-primary" data-dismiss="modal" data-bs-dismiss="modal">Close</button>  
                </div>  
            </div>  
        </div>  
    </div>

CodePudding user response：

You've put $('#sendall_form').on("submit", function(event){ inside $("#sendall").on('click', function() {. This means every time the user clicks on "sendall" it'll register another "submit" event handler. It won't remove the previous ones. So if someone clicks sendall twice, then next time the form is submitted, it'll send two AJAX requests (because the event handler is registered twice).

As far as I can tell, your "sendall" button likely only needs to open the modal. All other processing can occur when the form is submitted. The code to declare the "submit" event handler should be outside the "click" handler, so that it only ever gets bound to the form once.

Something like this:

$("#sendall").on('click', function() {
  //  console.log(array); //debug log
  $('#sendall_Modal').modal('show'); 
});

$('#sendall_form').on("submit", function(event){  
  event.preventDefault();

  var array = [];
  $("input:checked").each(function() {
    array.push($(this).val());
  });

  var dbarray = JSON.stringify(array);
  // console.log(dbarray);
  $.ajax({  
    url:"../../bl/office/sendall.php",  
    method:"POST",  
    data:{dbarray:dbarray}, 
    cache:false, 
    success:function(data){  
      $('#sendall_form')[0].reset();
      $('#sendall_Modal').modal('hide');
    },
  }); 
});