CODEWITHSUNDEEP
jquery
Patrick J Collins
Patrick J Collins

Reputation: 1009

How to stop double form submit in HTML/jQuery?

I have a form in my HTML page, containing a label, an input field and a submit button. Here is an example:

<form id="myForm" action="#">
<label for="myField">My field</label>
<input type="text" id="myField" name="myField" class="required">
<input type="submit" value="Send" />
</form>

In my javascript code, I'm using jQuery to bind an event handler to the submit event. This event handler overrides the default submit action. It validates the form, performs an animation and then submits the field values to the server using an ajax call. Here is an example:

$("#myForm").bind("submit", function() {
  var valid = $("#myForm").validate().form();
  if (valid) {
    var val = $("#myField").val();
    $("#myForm").animate( /* blah */, function() {
      $.ajax({
        // ajax call here...
      });
    });
  }
  return false; // cancel default submit action
});

Note, that this is a simplified example, my real code is more complex; I also have multiple forms with different behaviours.

Now, I'm looking for an elegant solution to avoid re-entry: currently, the user can hit the return key multiple times, which will result in my event handler being called multiple times, and thus multiple animations and ajax requests. I can't simply unbind/rebind inside the handler because the handler is overriding the default submit behaviour. Also the handler itself adds callbacks to other functions: animate() and ajax().

The only solution I can think of is to add a boolean semaphore, that I set to true/false as in the following example :

var myFormSubmitExecuting = false;
$("#myForm").bind("submit", function() {
  if (myFormSubmitExecuting) return;
  myFormSubmitExecuting = true;
  var valid = $("#myForm").validate().form();
  if (valid) {
    var val = $("#myField").val();
    $("#myForm").animate( /* blah */, function() {
      $.ajax({
        // ajax call here...
        // when done :
        myFormSubmitExecuting = false;
      });
    });
  } else {
    myFormSubmitExecuting = false;
  }
  return false; // cancel default submit action
});

I would prefer a generic solution that I can write once and apply to all my forms. Any suggestions?

Upvotes: 1

Views: 606

Answers (2)

Calvin
Calvin

Reputation: 1295

I was just doing something like this earlier, maybe it might help you. It basically disables the submit field on post and re-enables it on success handler.

var form = $('form#some-form');
var submit = $('input[type=submit]', form);

var submit_data = form.serialize();

submit.attr('disabled', true);
$.post(url, submit_data, function (data) {
    submit.attr('disabled', false);
    ....
});

Upvotes: 1

rynkadink
rynkadink

Reputation: 138

I guess you could disable the submit button on submit event and then enable it when your ajax call is complete. Using .attr('disabled', 'disabled') to disable and .attr('disabled', '') to enable (functions relative to your button). You could pass the elements ids to ine function that would handle it all. Hope it helps.

Upvotes: 1

Related Questions