Prevent double clicking asp.net button

Question

I realise this question has been asked but none of the answers worked for my project.

I have a button that when clicked calls an API, so there is a 1 second delay.

I have tried several things nothing works.

btnSave.Attributes.Add("onclick", " this.disabled = true; " + ClientScript.GetPostBackEventReference(btnSave, null) + ";");

Even that does nothing.

Answer 1

Prevent Double Click .Please add below code in your aspx page.

<script type="text/javascript" language="javascript">

   Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
   function BeginRequestHandler(sender, args) { var oControl = args.get_postBackElement(); oControl.disabled = true; }

</script>

Answer 2

This solution is simple and effective. On your button include this code:

OnClientClick="return CheckDouble();"

And wherever you want your JavaScript - e.g. At the bottom of your page:

<script type="text/javascript">
   var submit = 0;
   function CheckDouble() {
     if (++submit > 1) {
     alert('This sometimes takes a few seconds - please be patient.');
     return false;
   }
 }
 </script>

Answer 3

Most of the above suggestions failed to work for me. The one that did work was the following by tezzo:

Me.btnSave.Attributes.Add("onclick", "this.disabled=true;")
Me.btnSave.UseSubmitBehavior = False

Simpler still, rather than using the above in the code-behind, just use the following:

   <asp:Button ID="btnSave" runat="server" Text="Save" 
      UseSubmitBehavior="false"
      OnClientClick="this.disabled='true';" 
   </asp:button>

UseSubmitBehavior="false" is the key.

Answer 4

You can prevent double-clicking using this code:

Me.btnSave.Attributes.Add("onclick", "this.disabled=true;")
Me.btnSave.UseSubmitBehavior = False

So you can use btnSave_Click to call your API.

Usually I have a lot of Validators in my Page: setting Validator.SetFocusOnError = True I can run this code to reenable save button if a validation failed.

Me.YourControl.Attributes.Add("onfocus", Me.btnSave.ClientID & ".removeAttribute('disabled');")

Answer 5

This is the one I found works in all cases.

<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>

Now here’s the short JavaScript snippet that will disable the button as soon as it is clicked so that when PostBack occurs the button cannot be clicked again.
<script type = "text/javascript">
function DisableButton() {
    document.getElementById("<%=Button1.ClientID %>").disabled = true;
}
window.onbeforeunload = DisableButton;
</script>

The above script disables the ASP.Net Button as soon as the page is ready to do a PostBack or the ASP.Net form is submitted.
But in cases you might want to disable all Buttons and Submit Buttons on the page hence for such cases I have created another function which disables all Buttons and Submit buttons whenever there’s a PostBack or form submission
<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>

Answer 6

Prevent Double Click .Please add below code in your aspx page

<script type = "text/javascript">
function DisableButton() {
document.getElementById("<%=Button1.ClientID %>").disabled = true;
}
window.onbeforeunload = DisableButton;
</script>

Answer 7

At first my solution is like this:

<script>
function disableButton(btn) {
    setTimeout(function () { btn.disabled = true; }, 20);
    return true;
}
</script>
<asp:Button runat="server" ID="btnSave" Text="Save" OnClick="btnSave_Click" OnClientClick="return disableButton(this);" />

Without setTimeout the button will be immediately disabled and then the OnClick event will not be fired. The drawback of this approach is that the Save button will not be accessible anymore if some validation fails or some error happens.

So I don't think disable the button is a good solution, and come up with another solution:

     function disableButton(btn) {
        if (btn.hasclicked) return false;
        btn.hasclicked = 1;
        btn.onmouseenter = function () { this.hasclicked = 0; };
        return true;
    }

But my colleague points out that if the post processing is very slow, before it is finished, the user is still able to perform the double postback by leave-enter-click the button. So I figured out another two solutions:

1. Run the validation from client before submitting the form. But if your page contains multiple ValidationGroup, it is said that the following Page_ClientValidate() should be called multiple times with a passed-in ValidationGroup parameter: e.g. Page_ClientValidate("group1"):

function disableButton(btn) {
  if (Page_ClientValidate) {
    Page_ClientValidate();
    if (!Page_IsValid) {
      btn.setAttribute("btnClicked", "n");
      return true;
    }
  }
  if (btn.getAttribute("btnClicked") == "y") {
    return false;
  } else {
    btn.setAttribute("btnClicked", "y");
    return true;
  }
}

2. As the ASP.NET has only one form in a page (not ASP.NET MVC), we can also let the onsubmit client event of the form to intercept the double click:

   function disableButton(btn) {
   $("form").submit(function () {
       if (btn.getAttribute("btnClicked") == "y") 
           return false;
       else 
           btn.setAttribute("btnClicked", "y");
           return true;
   });}
   

   I'll ask QA to test those two approaches(Post edit: QA has proved that it is very dangerous to use this approach. Please refer to my following comments for details).

Answer 8

Try this way, it's a working solution:

For all browsers including Opera Mobile browser which doesn't support js, means your form will not be blocked in that type of browsers.

Add this in Page_load() method:

BtnID.Attributes.Add("onclick", "if(typeof (Page_ClientValidate) === 'function' && !Page_ClientValidate()){return false;} this.disabled = true;this.value = 'Working...';" + ClientScript.GetPostBackEventReference(BtnID, null) + ";");

Answer 9

This Worked for me too:

BtnID.Attributes.Add("onclick", "if(typeof (Page_ClientValidate) === 'function' && !Page_ClientValidate()){return false;} this.disabled = true;this.value = 'Working...';" + ClientScript.GetPostBackEventReference(BtnID, null) + ";");