Disable asp.net button after click to prevent double clicking
Solution 1
Here is a solution that works for the asp.net button object. On the front end, add these attributes to your asp:Button definition:
<asp:Button ... OnClientClick="this.disabled=true;" UseSubmitBehavior="false" />
In the back end, in the click event handler method call, add this code to the end (preferably in a finally block)
myButton.Enabled = true;
Solution 2
I have found this, and it works:
btnSave.Attributes.Add(
"onclick",
"this.disabled = true;" + ClientScript.GetPostBackEventReference(btnSave, null) + ";");
Solution 3
Check this link, the most simplest way and it does not disable the validations.
http://aspsnippets.com/Articles/Disable-Button-before-Page-PostBack-in-ASP.Net.aspx
If you have e.g.
<form id="form1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Clicked" />
</form>
Then you can use
<script type = "text/javascript">
function DisableButton() {
document.getElementById("<%=Button1.ClientID %>").disabled = true;
}
window.onbeforeunload = DisableButton;
</script>
To disable the button if and after validation has succeeded, just as the page is doing a server postback.
Solution 4
If you want to prevent double clicking due to a slow responding server side code then this works fine:
<asp:Button ... OnClientClick="this.disabled=true;" UseSubmitBehavior="false" />
Try putting a Threading.Thread.Sleep(5000) on the _Click() event on the server and you will see the button is disabled for the time that the server is processing the click event.
No need for server side code to re-enable the button either!
Solution 5
If anyone cares I found this post initially, but I use ASP.NET's build in Validation on the page. The solutions work, but disable the button even if its been validated. You can use this following code in order to make it so it only disables the button if it passes page validation.
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Submit" OnClientClick=" if ( Page_ClientValidate() ) { this.value='Submitting..'; this.disabled=true; }" UseSubmitBehavior="false" />
Goutham
Updated on July 09, 2022Comments
-
Goutham almost 2 years
I have an ASP.NET button that I need to disable after the user clicks it to prevent double-clicking. Once the submit completes it has to be enabled again. Can anyone help me with this?
-
Shawn Gavett about 7 yearsWorked perfectly for what I needed to accomplish. You can also add
this.style.backgroundcolor = '#abcdef';
to change style aspects of the element. -
Bob Swager almost 7 yearsWhat's clientScript ?
-
Nick over 6 yearsThis works perfectly. Just want to emphasize the need for
UseSubmitBehavior="false"
, without that, your button click will not fire in code-behind. -
Kiquenet about 6 yearsWhy
getElementById('button')
? It woulb be <%= button.ClientID %> ? -
MC9000 over 5 yearsUnfortunately, this doesn't appear to work. The button is still enabled while waiting for the post to complete (meaning you can click on it many times).
-
MC9000 over 5 yearsThis is the only answer I could find that actually works! Even better, the button changes to let the user know it's being submitted (no giant DIV overlays or other nonsense!)
-
Muds over 5 yearsday 1 with asp.net, my button gets disabled but never gets enabled again, what could I be missing
-
Josue Barrios about 5 yearsExcellent solution!, it's working perfectly for me thanks!!.
-
mn. almost 5 yearsi believe they're referring to Page.ClientScript (in System.Web.UI namespace) stackoverflow.com/questions/11808329/…
-
Zizzipupp over 4 yearsAnd where do you put this code? If it is a standalone script, how do you call it from the c# code-behind?
-
Zizzipupp over 4 yearsIt does not work. My button is still enabled and I can click on it again while it is still processing the response.
-
Zizzipupp over 4 years@ShawnGavett where do you exactly add that line?
-
rick schott over 4 yearsCould do either, tricky part is the Id is generated so you need to pass it into a function if put in a standalone script.
-
Shawn Gavett over 4 years@Zizzipupp - you can create a CSS class and apply it to the
CssClass
attribute on the button, or you can do an inline style with theStyle
attribute.