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:
-
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.
-
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).
There have been no comments | Subscribe to Comments | Jump to Form »