ajax提交多次

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>

</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');
        }
      }
    });
  }));