ajax submit multiple times

Question

I have created an application in the php, I am using the bootstrap model to update user details using AJAX. Now there are two forms: first updates the user's details and adds comments to another user. When I try to submit a form to AJAX and I try to submit a form, it does not work, when i use ajaxComplete function then my form data has been submitted successfully, but at the time it submits the form multiple times at the same time.

 $(document).ajaxComplete(function() { $("#add-remarks").on('submit', (function(e) { e.preventDefault(); $.ajax({ type: "POST", url: $("#add-remarks").attr("action"), cache: false, context: this, data: $("#add-remarks").serialize(), //only input success: function(data) { var obj = JSON.parse(data); $("#add-remarks")[0].reset(); if (obj['msg'] == 'isuccess') { notification('insert'); } else { notification('error'); } } }); })); 

 <div class="modal-body"> <div class="row"> <div class="col-md-12"> <div class="card-group-control card-group-control-right" id="accordion-model"> <div class="card"> <form method="post" name="update-user-details" id="update-user-details" action=""> <div class="row"> <div class="col-md-4"> <div class="form-group form-group-float"> <label class="d-block font-weight-semibold">First Name</label> <input type="text" class="form-control" placeholder="First Name" name="customer_name" id="customer_name"> </div> </div> <div class="col-md-4"> <div class="form-group form-group-float"> <label class="d-block font-weight-semibold">Mobile</label> <input type="text" class="form-control" placeholder="Mobile" name="mobile_number" id="mobile_number"> </div> </div> <button type="submit" class="btn bg-blue">Save Changes</button> </div> </form> <form method="post" name="remarks" id="remarks" action=""> <div class="row"> <div class="col-md-4"> <div class="form-group form-group-float"> <label class="d-block font-weight-semibold">Remarks</label> <input type="text" class="form-control" placeholder="Remarks" name="remarks" id="remarks"> </div> </div> <button type="submit" class="btn bg-blue">Save Changes</button> </div> </form> </div> </div> </div> </div> </div> 

Answer 1

Move this piece of code outside of your ajaxComplete() function. You are probably somehow triggering the ajaxComplete function multiple times, causing multiple event listeners for the form submit.

 $("#add-remarks").on('submit', (function(e) {
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: $("#add-remarks").attr("action"),
      cache: false,
      context: this,
      data: $("#add-remarks").serialize(), //only input
      success: function(data) {
        var obj = JSON.parse(data);
        $("#add-remarks")[0].reset();
        if (obj['msg'] == 'isuccess') {
          notification('insert');
        } else {
          notification('error');
        }
      }
    });
  }));