Disable a button control during postback.
ASP.NET, UI By Dave Ward on April 17th, 2007Postback Ritalin has been getting a lot of search hits intended to find a button disable technique for full .NET postbacks. So, this example is for all of you searching for a non-AJAX solution.
The trick is to use the OnClientClick and UseSubmitBehavior properties of the button control. There are other methods, involving code on the server side to add attributes, but I think the simplicity of doing it this way is much more attractive:
<asp:Button runat="server" ID="BtnSubmit" OnClientClick="this.disabled = true; this.value = 'Submitting...';" UseSubmitBehavior="false" OnClick="BtnSubmit_Click" Text="Submit Me!" />
OnClientClick allows you to add client side OnClick script. In this case, the JavaScript will disable the button element and change its text value to a progress message. When the postback completes, the newly rendered page will revert the button back its initial state without any additional work.
The one pitfall that comes with disabling a submit button on the client side is that it will cancel the browser’s submit, and thus the postback. Setting the UseSubmitBehavior property to false tells .NET to inject the necessary client script to fire the postback anyway, instead of relying on the browser’s form submission behavior. In this case, the code it injects would be:
__doPostBack('BtnSubmit','')
This is added to the end of our OnClientClick code, giving us this rendered HTML:
<input type="button" name="BtnSubmit"
onclick="this.disabled = true; this.value = 'Submitting...';__doPostBack('BtnSubmit','')"
value="Submit Me!" id="BtnSubmit" />This gives a nice button disable effect and processing text, while the postback completes.
If you found this but are more interested in an AJAX solution to disable buttons during partial postbacks, check out either Postback Ritalin or CSS style as AJAX progress indicator.
Similar posts
Kick me!
If you found this post helpful, please click below to "Kick" it:
What do you think? Your comments are welcomed.
I appreciate all of your comments, questions, and other feedback, but please try to stay on topic. If you have a question unrelated to this post, I recommend posting on the ASP.NET forums. If you post there and then contact me with a link to the post, I'll try to take a look at it for you.
If you're replying to an existing comment, please use the threading feature. To do this, click the "Reply to this comment" link underneath the comment you're replying to.
Comments
What in case of an image button. how to disable it and still the post back will occur
I believe you can use the same method. ImageButton doesn’t support UseSubmitBehavior, but shouldn’t be needed since it’s not a true form submit element.
I tried as per your code sample piece here in VS.Net 2003 and used on a asp:button control. the page does postback but the event is not firing for that button.. how to handle that..??
I don’t think ASP.NET 1.1 supports UseSubmitBehavior.
What you could probably do is use Attributes.Add() in your code behind to add the same client script to the button control.
thanks for your reply sir. but i tried using attributes.add() in some ways i know like written a javascript function to “disabled=true” code block. but if so, as per the above explanations, the c# event handler is not firing.
what else to do or what to add in attributes.add() function. Please help me out sir?
Try something like this:
Thank you Dave Ward. I have been trying for 2 days to figure out the image button and your solution was the one I needed!!! Works great.
Works perfectly, I’ve been looking for a very simple solution for some time now. Great post, keep up the good work.
thank you so much i had tried hell lot of things to get this but i din knew it was so simple
thank you so much
Finally! Thank you so much!
I’m new to ASP.net. How can I apply here?
Currently, the button fires when hitting the refresh button in IE. I want to fire the button only when clicked and not on refresh the page or F5.
I’m not sure if this is related to the topic.
Many thanks!
edcon
The reason that’s happening is because the button click causes a POST to the server. When you refresh a page that’s the result of a POST request, the browser re-POSTs that request, which results in the server seeing the button being clicked again.
That’s a tough problem to reliably avoid.
One way is to make the submit button redirect to a “please wait” type page while the process completes, but that introduces other complexities.
Another way to handle it is to set a Session variable when the process begins and not accept another submission for a certain timeframe.
Hope that helps.
Hi Dave,
Thank you for giving me some options to consider. But when I tried to redirect (response.redirect) to the same that solves the issue but I’m not sure if this the right way to do it. I got the idea from this link, http://forums.asp.net/t/1151989.aspx
Do you think this will lead to another problems?
Edcon
I think that’s a good way to handle it. That’s what I was referring to in my first suggestion.
Thanks! It helped me a lot.
-edcon
Thank you for the post, this helps a lot. But, I’m having one problem. I’m using this button to run a report and the report opens in an Adobe window. Once the report opens in another window, when I go back to the main page where the button was, the button is still disabled until I click to refresh the page. Is there any way to get the page to refresh or the button to become enabled again before the Adobe window opens? Thanks!
Hey. Thx for the post. I get a javascript error in my browser (IE7) when doing this. It does not seem to be a problem with the javascript code itself, because I took all the code out of the function to see. Any ideas?
Never mind me…..blonde moment!! Your stuff works great!!
It is not working with field validations, disables the button even when there are invalid fields.
Shakeel.
How do you do this with a asp menu instead of a button?
I’m not sure. I don’t use the Menu control. I believe those render as <A> tags though, so you’d need to go about it completely differently than this.
I’d suggest posting on the asp.net forums.
Once again, great solution!!!
Very interesting stuff- thanks for posting. Just one question (which I probably should know): where is the $get() js function defined? I’m not familiar with it.
Thanks, Frank
It’s part of the ASP.NET AJAX client side framework. In the usual one-parameter case, it’s functionally identical to document.getElementById. Just a shortcut.