CODEWITHSUNDEEP
javascripthtml
user2209644
user2209644

Reputation: 711

javascript function is ignored

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

Upvotes: 1

Views: 1812

Answers (3)

joelmdev
joelmdev

Reputation: 11773

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);    
}

Upvotes: 2

Andrew
Andrew

Reputation: 5340

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.

Upvotes: 2

Kevin Seifert
Kevin Seifert

Reputation: 3572

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

Upvotes: 0

Related Questions