multiple ajax calls on button click if page is not refreshed jquery

Question

If I click the Submit button once then the AJAX call is executed only once. This is perfect.

The problem is if I don't refresh the page and click the Submit button for the second time, then the AJAX call is executed twice. If I click the button for a third time without refreshing the page, the AJAX call is executed thrice.

What is wrong with my code? I want the AJAX call to be executed only once when I click the Submit button.

<form id="myForm">
  <div class="modal-dialog" role="document">
    <input type="hidden" name="buttonId" id="buttonId">
    <div class="modal-content">
      <div class="modal-body">
        <div class="input-group">
          <span id="commspan" class="input-group-addon">Comment</span>
          <input type="text" name="queuqOther" id="queuqOther" class="form-control">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" id="btnPause" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </div>
</form>

$('#btnPause').on('click', function() {
  var form = $("#myForm");
  form.validate();
  if (form.valid()) {
    $.ajax({
      async: true,
      crossDomain: true,
      url: "http://localhost/postdata",
      xhrFields: {
        withCredentials: true
      },
      success: function(data) {
        console.log(data);
      }
    });
  }
});

$('#btnPause').off().on('click'... You keep attaching a new handler every time. — Rafael Herscovici
– Rafael Herscovici, Commented Dec 19, 2018 at 11:38
Nothing about your the code you've shown is attaching multiple event handlers, so I'm unsure why people are suggesting off(). Is there any other logic called when the AJAX returns as this code will not cause the behaviour you describe — Rory McCrossan
– Rory McCrossan, Commented Dec 19, 2018 at 11:48

CertainPerformance · Accepted Answer · 2018-12-19 11:38:48Z

2

The easiest tweak would be to remove the listener once you check that the form is valid:

const $btnPause = $('#btnPause');
const handler = function() {
  var form = $( "#myForm" );
  form.validate();
  if(form.valid()){
    // remove handler:
    $btnPause.off('click', handler);
    $.ajax({
      async : true,
      crossDomain: true,
      url: "http://localhost/postdata",
      xhrFields: {
        withCredentials: true
      },                            
      success: function (data) {
        console.log(data);
      }
    });
  }
};

$btnPause.on('click', handler);

answered Dec 19, 2018 at 11:38

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

CertainPerformance Over a year ago

Seems fine to me jsfiddle.net/w159bj24 What exactly is the error you're running into?

Rory McCrossan Over a year ago

@CertainPerformance the OP isn't binding multiple events here, so I don't see why off() would make any difference.

CertainPerformance Over a year ago

@RoryMcCrossan I thought the problem was that multiple clicks of "submit" result in multiple ajax calls, for which I thought the obvious solution was to just remove the handler the first time an ajax call is getting sent out. Am I missing something?

node_man Over a year ago

I removed $btnPause.off('click', handler); and changed $btnPause.on('click', handler); to $btnPause.unbind().bind('click', handler); and it worked

node_man Over a year ago

Thank you very much. Please update your answer with what I suggested above so that it will help others :)

|

Limbo · Accepted Answer · 2018-12-19 11:54:18Z

2

Try removing click event handler with off() as Following

$('#btnPause').off('click').on('click',function() {
  var form = $( "#myForm" );
  form.validate();
  if(form.valid()){
    $.ajax({
              async : true,
              crossDomain: true,
              url: "http://localhost/postdata",

              xhrFields: {
                 withCredentials: true
                },                            
              success: function (data) {
                console.log(data);
                  }
          });
    }
});

You can also use one() to execute the event handler at most once

$('#btnPause').one('click',function() {/* your code here */});

edited Dec 19, 2018 at 11:54

Limbo

2,3103 gold badges25 silver badges43 bronze badges

answered Dec 19, 2018 at 11:48

Elish

4944 silver badges14 bronze badges

Comments

Sushil · Accepted Answer · 2018-12-19 14:38:44Z

1

Always unbind the event handlers once you complete binding. For eg. use .off() for .on() attached events.

$('#btnPause').off('click').on('click', function() {
//your Code Here
});

answered Dec 19, 2018 at 14:38

Sushil

1,1311 gold badge10 silver badges24 bronze badges

Comments

Alfie · Accepted Answer · 2018-12-28 01:39:30Z

0

const $btnPause = $('#btnPause');
const handler = function() {
  var form = $( "#myForm" );
  form.validate();
  if(form.valid()){
    // remove handler:
    $btnPause.off('click', handler);
    $.ajax({
      async : true,
      crossDomain: true,
      url: "http://localhost/postdata",
      xhrFields: {
        withCredentials: true
      },                            
      success: function (data) {
        console.log(data);
      }
    });
  }
};

$btnPause.on('click', handler);

answered Dec 28, 2018 at 1:39

Alfie

215 bronze badges

1 Comment

Ali Over a year ago

Hi, Welcome, It is recommended to explain your code when posting the answer please :)

Collectives™ on Stack Overflow

multiple ajax calls on button click if page is not refreshed jquery

4 Answers 4

10 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

10 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related