Disable ASPNet button after click to prevent double clicking

In this article I will explain with an example, how to disable Button after Click to prevent Double Clicking using JavaScript in ASP.Net.

This article also explains how to disable all Buttons and Submit Buttons when any one Button is clicked before Page PostBack is done or Form submission using JavaScript in ASP.Net.

HTML Markup

The following HTML Markup consists of a Form with two ASP.Net Buttons of which the Button1 has been assigned an OnClick event handler.

<asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Clicked" />

<asp:Button ID="Button2" runat="server" Text="Button2" />

</form>

Button Click event

The following event is executed when the Button1 is clicked. Here simply the thread made to sleep on order to depict a long running process.

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 System.EventArgs)

System.Threading.Thread.Sleep(1000)

End Sub

JavaScript function for disabling specific Button when Clicked

The DisableButton JavaScript function is used for disabling specific Button when Clicked.

Inside the DisableButton JavaScript function, the Button1 is referenced using its ID and then it is disabled by setting the JavaScript disabled property to TRUE.

The DisableButton JavaScript function is called on the onbeforeunload event 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.

function DisableButton() {

document.getElementById("<%=Button1.ClientID %>").disabled = true;

}

window.onbeforeunload = DisableButton;

</script>

JavaScript function for disabling all Buttons when any one Button is Clicked

The DisableButtons JavaScript function is used for disabling all Buttons on the Page when any one Button is Clicked.

Inside the DisableButtons JavaScript function, all the INPUT elements are referenced and a FOR loop is executed over the referenced elements.

Inside the FOR loop, if the element is of type Button or Submit, then it is disabled by setting the JavaScript disabled property to TRUE.

The DisableButtons JavaScript function is called on the onbeforeunload event 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 again enabled.

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>

Screenshot

Disabling specific Button