Stop double form submissions

Jake Howlett, 9 November 2000

Category: Forms; Keywords: Submit Button

I bet the impatient amongst us have clicked a "Submit" button, waited a while, assumed nothing is happening, then pressed it again. I know I have. The effect of such actions depend on the timing of the clicks, but it can potentially lead to multiple documents.

Another problem is people, like me, who click "Submit" then change their mind and press Escape, thus telling the browser to stop the submission even though the server has received the request already. It is then possible to re-submit this form and the server will treat it as a separate request.

You can stop this happening by disabling the Submit button before the form gets submitted. Here is the JavaScript function called by the onClick event of the Submit button. Notice that this is only triggered once validation has ocurred.

<script type="text/javascript">
<!--
function doSubmit(frm, btn){
if (frm.textField.value==''){
alert('You need to fill the field in first');
}else{
btn.disabled=true;
btn.value='Please wait...';
frm.submit();
}
}
-->
</script>


Required Field:




Note: If an error ocurrs "server-side" and the user genuinely needs to be able to re-submit the form, they aren't going to be happy that they need to refresh the page and enter all the information again. To get around this consider a "Cancel" button that re-enables the submit button. Use at will.