In this article I will explain with an example, how to disable Button after click to prevent double clicking using
JavaScript in ASP.Net.
HTML Markup
The following HTML Markup consists of two ASP.Net Button controls i.e. Button1 and Button2 in which Button1 has been assigned with an OnClick event handler.
<asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Clicked" />
<asp:Button ID="Button2" runat="server" Text="Button2" />
JavaScript Script function for disabling specific Button when Clicked
The
DisableButton JavaScript function is assigned to the
window.onbeforeunload event handler which occurs just before the HTML Page is unloaded from the browser before sending it to the server.
Note: After successful PostBack, a fresh HTML Page is re-created and hence the Button which was disabled using
JavaScript is again enabled.
DisableButton
The
DisableButton JavaScript function is used for disabling specific Button when clicked.
Inside the
DisableButton JavaScript function, the
Button1 is referenced using its
ClientID and then it is made disable by setting the
disabled property to TRUE.
<script type="text/javascript">
function DisableButton() {
document.getElementById("<%=Button1.ClientID %>").disabled = true;
}
window.onbeforeunload = DisableButton;
</script>
JavaScript Script function for disabling all Buttons when one Button is Clicked
The
DisableButtons JavaScript function is assigned to the
window.onbeforeunload event handler which occurs just before the HTML Page is unloaded from the browser before sending it to the server.
Note: After successful
PostBack, a fresh HTML Page is re-created and hence all the Buttons which were disabled using
JavaScript are made enabled.
DisableButtons
The
DisableButtons JavaScript function is used for disabling all Buttons whether it is
INPUT button or
Submit button on the Page when one button is clicked.
Inside the
DisableButtons JavaScript function, all the HTML INPUT elements are referenced and a FOR loop is executed over it.
Inside the FOR loop, if the element is of type button or submit, then it is disabled by setting the disabled property of INPUT element to TRUE.
<script type="text/javascript">
function DisableButtons() {
var inputs = document.getElementsByTagName("INPUT");
for (var i in inputs) {
if (inputs[i].type == "button" || inputs[i].type == "submit") {
inputs[i].disabled = true;
}
}
}
window.onbeforeunload = DisableButtons;
</script>
Delaying Form Submission
When Button1 is clicked, the Thread.Sleep function is used to delay the process.
Here it is set to 1000 milliseconds equivalent to 1 second. During this period of time the further code will be in paused state.
Note: Thread.Sleep function is used to simulate a long running process. Thus, it must be removed when programming in actual project.
C#
protected void Button1_Clicked(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(1000);
}
VB.Net
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
System.Threading.Thread.Sleep(1000)
End Sub
Screenshots
Disabling specific Button
![Disable ASP.Net Button after Click to prevent Double Clicking]()
Disabling all Buttons
![Disable ASP.Net Button after Click to prevent Double Clicking]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
