javascript function is ignored

Question

I want a really simple thing to happen on my page, after the user submits the form, there must be a delay before the form is actually submitted, however it doesn't seem to work html form:

<form action='index.php' method='get'>
<input type='submit' value='Reset' name='resetBtn' onClick='PreSubmit(this.form)'>
</form>

javascript function:

function PreSubmit(form) {
 var func = function () {
 form.submit();
 }
 setTimeout(func, 10000); 
}

so I am really really new to javascript, but how I see it, onlick event must call this javascript function, it should wait 10 seconds and only then submit the form and update the page, however the form is submitted right away, why? and how do I make it wait before submitting? any kind of help would be appreciated

Answer 1

You need to stop the default behavior of the submit button. Lot's of folks make the mistake of returning false to do this, but that's not quite right and it's important to understand what returning false is doing. This isn't the best way (unobtrusive JS is a whole different subject), but to accomplish what you want with minimal changes do something like the following

HTML:

<form action='index.php' method='get'>
<input type='submit' value='Reset' name='resetBtn' onClick='PreSubmit(event, this.form)'>
</form>

JS:

function PreSubmit(event, form) {
 if (event.preventDefault) { 
 event.preventDefault();
 } 
 else {
 event.returnValue = false; 
 }
 var func = function () {
 form.submit();
 }
 setTimeout(func, 10000); 
}

• user2209644: oh wow, very nice read, will definitely have a look at that, thank you, very informative
• joelmdev: @user2209644 note that the code in the link uses jQuery, but jQuery is just a javascript library and therefore is just javascript. the code in my answer is a less robust version of what jQuery's preventDefault function accomplishes
• user2209644: i see, would you recommend skipping javascript altogether and start directly with jquery?
• joelmdev: @user2209644 no. A good understanding of javascript will allow you to more effectively use jQuery, and be a better all around javascript developer. See this question and this question

Answer 2

add return to onclick.

onClick='return PreSubmit(this.form)'>

And add return false to PreSubmit.

function PreSubmit(form){
 ....
 //this will stop the click event
 return false;
}

So PreSubmit return false -> onClick return false, which will stop the submit button action.

http://jsfiddle.net/KVsQ4/

I think there's another problem you would consider, what'll happen if the user continuously click the button. wait another 10 secs(which means you should clearTimeout the previous timeID), or just disable it when the user click it the first time.

• user2209644: that works thank you! can you please tell me why the regular call to a function wouldn't work and return had to be used? if its not too much trouble. and about user clicking numerous times, i am using the delay to show an animation, basically this button will disappear anyway =)

Answer 3

You need to make it a type="button", not a type="submit"