logo

Stop double form submissions

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.

Feedback

  1. Jake You have a Error in this page

    Jake just to remind You the submit button is not working in this page.

    The browser shows the error frm has no properties.

    better check this out Jake.

      • avatar
      • Jake Howlett
      • Thu 30 Nov 2006

      Thanks. Fixed now

    • avatar
    • Steven
    • Fri 12 Mar 2010

    if your form is like so

    <input type="submit" name="something" />

    and do a php like

    if(!$_POST['something') {

    //do something

    } else {

    //do something

    }

    and the submiot is disable,

    php will think as is the submit button has no value,

    and thinks that one dose even exist,

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:



Navigate other articles in the category "Forms"

« Previous Article Next Article »
Limit amount of input in a field   AutoTabbing in a form

About This Article

Author: Jake Howlett
Category: Forms
Keywords: Submit; Button;

Options

Feedback
Print Friendly

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »