Question

In my form if you click Submit twice quickly enough I get two successful form ajax posts. How can I stop duplicate posts?

From what I can tell

1. User clicks submit
2. Ajax post sent
3. User clicks submit (completed and valid form)
4. Ajax post sent
5. Ajax response received
6. Page refreshed with empty (new empty form – requires values)
7. Ajax response received
8. Page refreshed with empty (new empty form – requires values)

The form is sent twice, I create two items.

There are similarly named questions but they relate to disabling validation or disabling ajax. Ajax, jquery validation and server side validation (Post-Redirect-Get in MVC) are working just fine for me.

Just to be clear I’m using jQuery Mobile’s Ajax navigation so I’m not writing any ajax.

Answer 1

This is the solution I have now is:

$(document).on('submit', "form", null, function (e) {
    $(this).find("input:submit")
    .attr('disabled', 'disabled')
    // the following is optional, arguably unnecessary
    .delay(2000)
    .queue(function (next) { $(this).removeAttr('disabled'); next(); });
});

(Updated to work in webkit)

The delay is just in case something goes wrong. In reality the form should get replaced and the replacement will not be disabled.

Better suggestions welcome.