Prevent Duplicate Form Submissions Using .Net Server Control

Are trigger-happy users causing you a headache because they repeatedly click the form Submit button, causing your application to create duplicate records, duplicate account registrations, or even worse, duplicate credit card transactions? Wouldn't it be nice if there were a clean and simple way to prevent these duplicate POSTs from occurring, without having to do any messy client-side javascript coding?

Enter SubmitLocker. If you can drop a .Net server control on a Web Form in Visual Studio .Net, you can use SubmitLocker ...it's as easy as that!

Let's begin by taking a look at SubmitLocker in action; doing so will give us a point of reference for the rest of this discussion. Below is a screenshot of a demo page which illustrates use of the SubmitLocker server control. You may click the image or caption below to see the live example.

Live Demo

Once the SubmitLocker demo is loaded by clicking the link above, all you need to do is click the Submit button. When you do so, you should note two things:

1. The Submit button immediately becomes disabled.
2. The Submit button caption briefly changes from Submit, to Please wait..., and then back to Submit.

Try as hard as you like, it will be impossible to click the Submit button more than once (as long as javascript is enabled).

By contrast, let's see what would happen if SubmitLocker were not used on this page. To do this, simply uncheck the Enable Locker checkbox - this will disable its functionality. Now, click the Submit button - after a brief delay it will disable. It is disabling because the button's Click event sets the Enabled property to false. If the button disabled without SubmitLocker, then why do we need it?

The need for SubmitLocker becomes apparent when you rapidly click the Submit button multiple times in succession. Notice that with SubmitLocker disabled, you can click it dozens of times before it becomes disabled. This is happening because it takes time for the server-side code in the Click event handler to update the client, disabling the button. During this time, several more postbacks have occurred, and undesirable consequences may result.

The SubmitLocker server control has a few other properties illustrated in the demo.

• NotifyOnLock (Boolean) - Displays a javascript alert when lock occurs.
• LockText (String) - The text to display as the target button's caption when lock occurs.

You may play with the settings on the demo to see how they work. Try checking the NotifyOnLock option, entering Busy as the LockText text, and then clicking Submit.

Setup Your Own Local Demo Project

The following instructions will help you set up a local Visual Studio 2008 version of the SubmitLocker demo (should work with VS 2005 as well).

First, download the Visual Studio 2008 project here: Uniinet.Net.Web.SubmitLocker.Demo.zip

After you've downloaded the project, you need to extract it. Once extracted, launch Visual Studio 2008 and choose File | Open Web Site... and browse to the directory where you extracted the SubmitLocker project to. Click Open to open the specified website, and now you're ready to go! Run the project, experiment with it, and refer to the sources for example usage.

To register the SubmitLocker component in the Toolbox, right-click in the General area of the Toolbox and select Choose Items... from the popup menu. The Choose Toolbox Items will appear.

Choose Toolbox Items dialog - Before

Click the Browse... button, select the Uniinet.Net.Web.UI.dll in the Bin directory where you previously extracted the project to, and click Open.

Open dialog

Choose Toolbox Items dialog - After

Now the SubmitLocker server control will be registered in the Toolbox, allowing you to easily drag-and-drop it into your own projects.

SubmitLocker added to Toolbox

I've used SubmitLocker on many projects and have found it quite handy. Remember, it relies on client-side scripting to work, so you should not rely on it to the exclusion of server-side measures.

Happy coding!

[END_OF_LINE]