Jump to content
Larry Ullman's Book Forums

Delaying A Form Submission

Recommended Posts

I am loving Javascript. I don't want to be a JS Ninja, but the things it can do really excite me. I am intrigued by all the uses for timers. I searched online for this but have found only mostly JQuery answers, which I don't want(ironically I like the more "spelled out" syntax of base JS).


Anyway, if i have a form that needs to be submitted, and I want to delay the submission of the form by 5 seconds and show a processing gif, how would I do that. The closest Jquery thing I could find was the following(again I don't want it in Jquery). I does stop the form submission at first(so I know Jquery was able to grab the reference to the form), but it never actually submits the form after. BTW, the $("<p>Delay...</p>").appendTo("body"); is there just as a debug. I can't figure out how to make it go away once the form submits.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/
jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$('form').submit(function (e) {
   var form = this;
   setTimeout(function () {
   }, 50000); // in milliseconds


Link to comment
Share on other sites

Woops, I hope everyone sees my first mistake. I put one too many zeroes in the setTimeout function(method). I had it set for 50 seconds. Also now that the form submits after 5 seconds, and reloads the page, the Delay then goes away.


For anyone wondering how could I make the reload/submission less obvious(especially if they are going to stay on the same page)....AJAX!


I guess to turn this into a base JS script, you would simply use getElementById to grab the form reference, get rid of var form = this, and use whatever base JS function you use(the name escapes me for the moment) to add an element to the DOM. Also, if you want to get rid of the processing message before the form submits, you can create another setTimeout function to remove it from the DOM(and maybe replace it from "processing" to "submitting").


I am sorry if you wasted any time with my original question, but I hope this shows how one little thing(me being a bonehead) can make you think your entire script doesn't work.

Link to comment
Share on other sites

It's really more of a ecommerce payment submission type thing(the delay is also used to show the processing .gif to further discourage double clicking...you could also just disable the submit button on click). Larry, you had done basically the identical thing in you Effortless Ecommerce Extras PDF, but for some reason, I remember it not working for me(99.99999% sure I did something wrong).


Hartley, thanks for the tip with the appendChild. So using a flag variable, you would basically turn the flag variable false once the user had clicked the submit button once? How would you then prevent a duplicate submission? I'm sure I;ve seen it done. TY

Link to comment
Share on other sites

Something like the following:


var global_flag = true;

function calledWhenFormIsSubmitted() {

 if (global_flag) {

   // Do all your processing here for the form, and at the end (within the if) change global_flag to false.

   global_flag = false;


 return false; // This needs to be out of the if at all times.


Link to comment
Share on other sites


  • Create New...