making sure a form is submitted only once

[noahd1]

I'm having trouble with what should be a simple javascript. The script's purpose is to stop people from submitting a form more than once on the same page. I'm not talking about a user hitting back and submitting again (this is a different unrelated issue). I'm talking about a specific situation where, if there's a long enough wait after hitting submit, or if the user is crazy and starts rapid-fire pressing submit, there's a chance that mulitple requests will be sent to the server. Bad news.

Has anyone dealt with this problem before and how have they dealt with it?

The most obvious solution did not work. Something like this:


isSubmitted = false;

function submitOnce(theForm)
{
if (isSubmitted) return;

isSubmitted = true;
theForm.submit();

}


in my case, a link calls it (as below) but could just as well be from a onSubmit call or something.


<a href="javascript:submitOnce(document.myform)">go</a>



The problem with this code is, if you rapid fire click on the link it doesn't do anything...it never submits....(platorm: WindowsNT, IE 5.5)...it just kind of hangs. If you double click, it does its job sometimes (not always), but it fails consistantly on rapid fire clicks.

I've tried other little solutions, including changing the href of the link after clicking on it, trying to disable the link, but can't get any alternative solutions to work. The best i got is to make the link wholly disappear after clicking on it once! Not really the best solution....

Any ideas/previous experience with this issue to relate?

Thanks,

Noah

[KeithMcL]

noahd1, you could disable the submit button after the first click using the code below:

<script>

function submitonce(theform){
//if IE 4+ or NS 6+
if (document.all || document.getElementById){
//screen thru every element in the form, and hunt down "submit"
for (i = 0; i < theform.length; i++) {
var tempobj = theform.elements[i]
if(tempobj.type.toLowerCase() == "submit")
//disable em
tempobj.disabled = true
}
}
}
</script>

[noahd1]

Hi Keith -

Changing the design might not be an option, but that's an idea. Right now, the design has a text link that submits the form via javascript. There's also an image which submits the form...

something like:


<a href="javascript:submitOnce()"><img src="go.gif"/></a>
<a href="javascript:submitOnce">Go</a>


The image i could possibly turn into a submit button, but the text link...

(Curious by the way, why you loop through the form elements, can't you just do a simple, document.getElementByID?)

[KeithMcL]

While I'm not a javascript guru at all shouldn't you still be able to use a text link to call the javascript function?

Also, I didn't actually write that code, I got it from another site, but I'm sure you could have used the document.getElementByID option.

[noahd1]

Calling javascript from the text link will disable the submit buttons on your form, but won't disable the link which, in this case, is acting like a submit button.