Michael Gaigg: Über UI/UX Design

How to Disable Button on form submit in .NET

This problem seems to be almost too obvious to be posted here but it took me quite some time to actually figure it out how to do it correctly - so I'd might just share it with you.

Disabling the submit button helps users comprehend that their action is in process and waiting for a response can be expected. It also prevents them from clicking the same action more than once which could lead to serious troubles (duplicate entries, application exceptions, etc.)

Problem

How do I disable a form submit button on a .NET page that does client-side validation?
The problem is that the button cannot simply be disabled because it would not be enabled again if the client-side validation prevents the form from being submitted.

Solution

.NET

<asp:Button runat="server" ID="btnSubmit" Text="Submit" OnClientClick="SubmitForm(this);" />


JavaScript:

function SubmitForm(source) {
ret = true;
if (typeof (Page_ClientValidate) == 'function') {
Page_ClientValidate();
ret = Page_IsValid;
}
if (ret) {
source.value = "Processing...";
source.disabled = true;
__doPostBack(source.name, "");
}
return ret;
}


Similar Posts:

• The importance of the JavaScript parseInt radix
• Silverlight Form Submission using the Enter Key
• Including Tweets into your Webpage

About Michael Gaigg

Michael Gaigg is a User Interface Expert at Esri. He is the team lead of the UI Engineering group in Professional Services and has been designing map applications for over 8 years.