Disable Submit button after it was clicked

While submitting the form data to a server to be handled by the Click event of Submit button, it would be a good practice to disable the button. Here is a small code sample to achieve this:

btnSubmit.OnClientClick = ClientScript.GetPostBackEventReference(btnSubmit, "") + "; this.value='Submitting...';this.disabled = true;";

Note: don't apply the tip to buttons which cause validation. Such buttons require more advanced onclick handler which checks client-side validation result.

submitted by Mustafa Basgun

11/6/2007

< Previous Tip

Next Tip >

Comments:

Thanks. This is great. The only problem is if you have client side validation that fails then you are in trouble.

Reddy 11/7/2007 6:44:18 PM

Reddy, you are right. The tip shouldn't be applied for buttons which cause validation (Button.CausesValidation = true). Thanks for pointing this out.

kostya.ly 11/8/2007 1:45:53 PM

This script also disables the option to resubmit the request. For example if a user presses the ´stop´ button in his/her browser or the webrequest time´s out.

(in my humble opinion: do not use this tip).

Chris 12/12/2007 2:07:02 PM

Use this tip only when you know that the button click will fire a long process..to avoid the use from double clicking the button and firing the event twice.

rodrigo 12/13/2007 4:08:22 PM

Every method, especially in programming world, has its own good practices, advantages, disadvantages and limitations depending on the application architecture and design flow. This "may" be fine to utilize when the button would fire an event that will generate a large volume of data and attire it to a gridview or some other data controls. It "may" also make sense to use it for some type of online credit card transaction scenarios.

Mustafa Basgun 12/14/2007 2:33:10 AM

I have found how to avoid issue when the Button.CausesValidation=true.

PostBackOptions myPostBackOptions = new PostBackOptions(btnSubmit);
myPostBackOptions.PerformValidation = true;
myPostBackOptions.ValidationGroup = "YourValidationGroupHere";

btnSubmit.OnClientClick = Page.ClientScript.GetPostBackEventReference(myPostBackOptions) + ";if(Page_ClientValidate('YourValidationGroupHere')){ this.value='Sending...';this.disabled = true;}";

If you don't use the ValidationGroup feature, you can use this code:

PostBackOptions myPostBackOptions = new PostBackOptions(btnSubmit);
myPostBackOptions.PerformValidation = false;

btnSubmit.OnClientClick = Page.ClientScript.GetPostBackEventReference(myPostBackOptions) + ";if(Page_IsValid){ this.value='Sending...';this.disabled = true;}";

Sergey P. 1/9/2008 1:17:50 AM

In my past this is how I did to achive this. I thought to share this

<asp:Button ID="btnSubmit" Text="Submit" runat="server"
onclick="btnSubmit_Click" OnClientClick="javascript:this.value='Sending...';this.disabled = true;" UseSubmitBehavior="false" />

Eswar 3/23/2008 1:53:33 AM

Check the below url

http://codekeep.net/snippets/9b1d8e28-bd4d-48c7-b64e-f3d7da976dfb.aspx

Arun 10/23/2008 8:34:47 AM

Name

URL

E-mail

Provide your e-mail address to receive notification about new comments.

Message

HTML tags are not supported.

Please add 7 and 8 and type the answer here:

RSS .NET Tip of The Day

Subscribe to receive one tip from the .NET Tips and Tricks Community per day.