prevent double or multiple form submissions

client side javascript to avoid double GET/POSTs

[broniusm]

Here's a solution I came up with to disallow multiple form submissions and therefore avoid double inserts in the database. I don't know if it works in all browsers, but IE took it ok:

I added:
this.onclick = new Function('return false');

to the onclick handler in the button:
<input type="submit" name="submit" onclick="this.onclick = new Function('return false');">

Which will submit the form and at the same time "turn off" the button or submit image from further clicking without disabling it as an INPUT upon processing of the form POST/GET.

Reason I opted for not having a disabled=true, is because in my testing, this also stopped the submit process dead in its tracks. Also, if it did work, it still wouldn't work in Dreamweaver which depends on "submit" to have a value (yes, the button itself is evaluated to determine that the form was submitted on that pass of calling the script).

Any other brilliant solutions? Does this work in other browsers?

[RonPK]

I haven't tested your method, but it looks like the form still may get submitted when the visitor hits enter.

So what about applying the same trick to the form itself?

<form onsubmit="this.onsubmit = new Function('return false');">

[broniusm]

Ron- that could work. I'll try to give it a shot when I get a chance.

My testing in IE shows that it both submits and prevents further submission.

[broniusm]

RonPK-
I stand corrected. I reread your reply and see you're referring to hitting Enter on the form. My testing shows that canceling the submit both submits and cancels further submits- mine does not!

Here's my test:

<script>
function submitit() {
 document.forms[0].txt.value += "submitted\n";
 document.forms[0].fld.focus();
 document.forms[0].onsubmit = new Function('return false');
 return false;
}
</script>
<form onsubmit="return submitit();">
 <textarea name="txt"></textarea>
 <input name="fld" type="text">
 <input type="submit" onclick="this.onclick = new Function('return false');">
</form>

But in practice, only this will be needed:

<form onsubmit="new Function('return false');">

Thanks for your participation!

[DrDoc]

You need a server side solution to avoid double posting...