Avoiding Multiple Submissions

Whether using a browser-supplied or a custom Submit button, we don’t want the form to be accidentally submitted multiple times.

We’ve all seen web pages that warn the visitor not to click a Submit button twice. Unfortunately, if the submission takes more than just a second or two, the visitor is left wondering if the click actually registered. At the same time, she’s afraid to click a second time—after all, she’s been warned of dire consequences if he clicks that second time. Just how long does the visitor wait in a case like this?

There are two user-friendly ways to avoid causing our visitors this kind of angst:

1. Immediately reassure visitors with feedback that the form is in the process of being submitted, often done with some type of small animation. This is a great way, under any circumstances, of reassuring visitors that something is indeed happening.

2. Use JavaScript to disable the Submit button after it’s clicked, thereby preventing a double submission.

   Add the following to the <form> tag:

   onsubmit="this.submitButtonName.disabled=true"

   Be aware that you might have to trace a hierarchy of path names to get to the button, if it’s embedded within other elements like a table, and that the page would need to be reloaded completely to re-enable the Submit button. Getting this to work might be a bit trickier than it appears if you’re unfamiliar with JavaScript and the Document Object Model (DOM).