JS /JQuery Form Submit Delay?

Question

I've implemented this 'locksubmit' plugin http://blog.leenix.co.uk/2009/09/jquery-plugin-locksubmit-stop-submit.html where it changes the display state of the button to disabled. I then want the form to be delayed by a few seconds before posting to the form URL.

What would I have to add in or modify to delay the form "post" once the user has clicked the submit button?

Thanks!

David Tang · Accepted Answer · 2011-02-24T05:37:41.170

22

Cancel the default form submit behaviour, and start a timeout at the same time:

$('form').submit(function (e) {
    var form = this;
    e.preventDefault();
    setTimeout(function () {
        form.submit();
    }, 1000); // in milliseconds
});

This should be compatible with the locksubmit plugin.

See a demo here: http://jsfiddle.net/7GJX6/

edited Feb 24 '11 at 05:37

answered Feb 24 '11 at 05:32

David Tang

92,262
30
167
149

6

And why does this not cause infinite recursion and no form submission? – jgivoni Oct 03 '14 at 13:12
2

It's not recursive because of `e.preventDefault()` and using `this.submit()` instead of `$('form').submit()`, which would cause an infinite loop. – Jake Wilson Jan 06 '15 at 05:58
What is the different between `this` and `$(this)` that prevents the recursion? – Kelderic Aug 21 '15 at 13:55

score 0 · Answer 2 · answered Feb 24 '11 at 05:34

I think this is what you're looking for - modify lockSubmit() as such:

jQuery(':submit').lockSubmit(function(){
  setTimeout(5e3); // fancy 5 seconds
});

And with options object:

 jQuery(':submit').lockSubmit({
   submitText: "Please wait",
   onAddCSS: "submitButtons",
   onClickCSS: "submitButtonsClicked"
},function(){
  setTimeout(5e3);
}));

Basically javascript has to wait for all arguments to be resolved before executing the body. By setting timeout during the argument we delay the return.

JS /JQuery Form Submit Delay?

2 Answers2

Linked