Delaying A Form Submission

[giantsfan24]

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;
   e.preventDefault();
   setTimeout(function () {
    form.submit();
   }, 50000); // in milliseconds

   $("<p>Delay...</p>").appendTo("body");
});</script>

[giantsfan24]

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.

[Larry]

Kudos for figuring it out and thanks for sharing. Although, just out of curiosity, why would you want to delay the submission of a form?

[HartleySan]

Good job figuring out the answer on your own, and the vanilla JS method most commonly used for adding elements to the DOM is document.appendChild.

I'm with Larry though in being perplexed about why you'd want to delay the submission of a form.

[Edward]

Kudos for figuring it out and thanks for sharing. Although, just out of curiosity, why would you want to delay the submission of a form?

 

Possible answer would be to stop repeat submission of one.

[HartleySan]

That can easily be avoided by using a flag variable though.

I still don't get it.

[giantsfan24]

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

[HartleySan]

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.

}

[Edward]

The common way is to disable the submit button with Javascript. eBay and all the other sites do that. You would require a php flag method just in case the user disabled js.

[HartleySan]

Good point, Edward. I only presented a JS solution, but having a similar PHP solution would be necessary to be thorough.

[Edward]

Thanks Hartley San, i am starting this Modern Javascript book just right now, so i may have some questions soon, i was working on other object orientated stuff but now its time to get this done and dusted by new year.