Let’s say you have 2 buttons on your web page.
<form id="form1" runat="server"> <asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Clicked" /> <asp:Button ID="Button2" runat="server" Text="Button2" /> </form>
Scenario 1: Disabling the specific button
<script type="text/javascript">
function DisableButton() {
document.getElementById("<%=Button1.ClientID %>").disabled = true;
}
window.onbeforeunload = DisableButton;
</script>
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.
Scenario 2: Disabling all the button
<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>
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.
Thanks to Mudassar Ahmed Khan for this helpful article.