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).

There have been no comments | Subscribe to Comments | Jump to Form »

Post Comment on This Article

Your e-mail address won't be published. If you simply add some value to the original post and stay on the topic, your comment will be approved.

You can use Textile parameters on your comments. For example: _italic_ *bold* bq. quated text "link text":URL — Get your own picture next to your comment with a Gravatar account.