The dreaded ASP.NET submit button double click

I’m sure every one of us has ran into the issue of a user inadvertently or even intentionally double clicking the buttons on our web applications, many times this can lead to invalid states or duplicated submissions or even the worst, duplicated billing. Through out my time as an asp.net developer this along with the back button has been a bane to web aplication development, I’ve seen many solutions for dealing with this issue however I seemed to find a very simple and reliable one.

Inside the aspx, create 2 buttons one for your active click one to be a place holder

<asp:Button ID=”btnSave” runat=”Server” CssClass=”button” Text=”Save Entry” OnClick=”btnSave_Click” />
<asp:Button ID=”btnSaveDisabled” Enabled=”false” runat=”server” Text=”Save Entry” CssClass=”button” Style=”visibility: hidden;” />

Note the style on the Disabled button that’s a key to this solution. Now inside the PageLoad

if (!Page.IsPostBack)
{
btnSave.OnClientClick = string.Format(“javascript:{0}.style.visibility = ‘hidden’;{0}.style.display¬† = ‘none’;{1}.style.visibility = ‘visible'”, btnSave.ClientID, btnSaveDisabled.ClientID);

With this in the code behind you always have the guaranteed client id of the controls without any need for any complex object finding that is browser specific and a very simple on client click method will remove the actual submit button from the page entirely and set the disabled one to show.

This solves both issues of double submitting and removing the button from the form entirely with the visibility = ‘none’ protecting from any type of html manipulation or JavaScript manipulation to click the button again even thought it’s not visible to the user.

BloggingContext.ApplicationInstance.CompleteRequest();