Form submitted multiple times when using the “submit” callback and $.ajax to post it

Question

I\'ve been observing some strange behavior with the following code:

$.fn.submit_to_remote = function() {
  // I use .each instead of the .submit directly so          


        

Answer 1

you can use this code to resolve :

$(this).submit(function() {
.
.
.
});

$(this).unbind("submit");

Answer 2

OpenCart double submit happens because there is a submit bind in common.js.

Avoid this by using an id pattern for the form that does not match "form-".

Example: <form id="myform" >.

Answer 3

I had the same problem and fixed like below using click.

 $('.submit_to_remote').on('click', function(){
//Some validation or other stuff
$(this).submit();
});

Answer 4

Yes, I agree with Seb, it's a good practice, in my opinion to always unbind before binding unless you are certain that there aren't currently binds to your element that you want. You can double bind your stuff on accident by simply using the '.submit', '.click', '.mouseover', etc... functions.

Get into the habit of doing this (never fails for me):

$('.some_element').unbind('submit').bind('submit',function() {
    // do stuff here...
});

... instead of:

$('.some_element').submit(function() {
    // do stuff here...
});

Answer 5

Unbind didn't work for me. This did:

$(document).off('submit');
$(document).on('submit',"#element_id",function(e){
    e.preventDefault();
    //do something
}); 

I hope it helps...

In fact unbind() can bring you some troubles if you have some validation and return before submit. Example:

$(document).on('submit',"#element_id",function(e){
    e.preventDefault();
    $(document).unbind('submit');
    var name = $(this).children('input[name="name"]').val();
    if( name == 'wrong name')
        return;

    //do something
});

In this case if you input is 'wrong name' the form will not be submitted and after that, when you put the "right name", the $(document).on('submit'.. will not be triggered, neither the e.preventDefault(); and your form will be submitted in the regular way .

Answer 6

Easier yet is:

$(".some-class").off().submit(function() {
    //Do stuff here
});