Disable asp.net button after click to prevent double clicking

Question

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?

It's simple button.enable = false after your desired code completion — Developer, Mar 04 '11 at 04:21
See my answer for another question if you don't want to fix this on a button-by-button basis: http://stackoverflow.com/a/28844217/787757 — sparebytes, Mar 05 '15 at 15:27

score 47 · Answer 1 · answered Dec 17 '12 at 23:23

47

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;

answered Dec 17 '12 at 23:23

kmonty

497
4
4

day 1 with asp.net, my button gets disabled but never gets enabled again, what could I be missing – Muds Jan 17 '19 at 16:39
It does not work. My button is still enabled and I can click on it again while it is still processing the response. – Zizzipupp Oct 25 '19 at 08:38

score 37 · Answer 2 · edited Mar 02 '17 at 10:01

37

I have found this, and it works:

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

edited Mar 02 '17 at 10:01

Uwe Keim

39,551
56
175
291

answered Feb 02 '12 at 15:55

gkneo

501
4
4

3

What's clientScript ? – Bob Swager Jul 21 '17 at 11:42
i believe they're referring to Page.ClientScript (in System.Web.UI namespace) https://stackoverflow.com/questions/11808329/the-name-clientscript-does-not-exist-in-the-current-context – mn. Aug 14 '19 at 02:36

score 17 · Answer 3 · edited Jan 05 '16 at 22:03

17

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.

edited Jan 05 '16 at 22:03

Donnelle

5,689
3
27
31

answered Jul 18 '12 at 22:30

mohan padmanabhan

171
1
2

1

Unfortunately, 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 Oct 31 '18 at 05:32
1

Excellent solution!, it's working perfectly for me thanks!!. – Josue Barrios Mar 01 '19 at 16:53

score 13 · Answer 4 · answered May 20 '15 at 00:25

13

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!

answered May 20 '15 at 00:25

Shaun Keon

717
7
4

Worked perfectly for what I needed to accomplish. You can also add `this.style.backgroundcolor = '#abcdef';` to change style aspects of the element. – Shawn Gavett Apr 25 '17 at 20:42
2

This works perfectly. Just want to emphasize the need for `UseSubmitBehavior="false"`, without that, your button click will not fire in code-behind. – Nick Jan 04 '18 at 17:06
@ShawnGavett where do you exactly add that line? – Zizzipupp Oct 25 '19 at 08:44
1

@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 the `Style` attribute. – Shawn Gavett Oct 30 '19 at 18:14

score 11 · Answer 5 · edited Apr 24 '18 at 15:26

Just need to add 2 attributes for asp button :

OnClientClick="this.disabled='true';"  UseSubmitBehavior="false"

e.g.

<asp:Button ID="Button1" runat="server" Text="TEST" OnClientClick="this.disabled='true';"  UseSubmitBehavior="false" CssClass="button-content btnwidth" OnClick="ServerSideMethod_Click"  />

For more details:

https://bytes.com/topic/asp-net/answers/918280-disable-button-click-prevent-multiple-postbacks

score 10 · Answer 6 · answered Nov 03 '15 at 19:38

10

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

answered Nov 03 '15 at 19:38

eqiz

1,521
5
29
51

This 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!) – MC9000 Oct 31 '18 at 05:43

score 5 · Answer 7 · answered Mar 02 '15 at 10:32

<asp:Button ID="btnSend" runat="server" Text="Submit"  OnClick="Button_Click"/>

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

score 3 · Answer 8 · answered Mar 04 '11 at 04:22

3

You can use the client-side onclick event to do that:

yourButton.Attributes.Add("onclick", "this.disabled=true;");

answered Mar 04 '11 at 04:22

Federico González

450
2
12

score 2 · Answer 9 · answered Mar 20 '13 at 13:40

I like to disable the button and call a postback, this way the code behind still gets run after the button is disabled.

this is how i attach from code behind:

btnProcess.Attributes.Add("onclick", " this.disabled = true; __doPostBack('btnProcess', ''); return false;")

Then re-enable the button in code behind:

btnProcess.Enabled = True

rick schott · Answer 10 · 2011-03-04T04:33:25.490

2

Disable the button on the OnClick event, then re-enable on the AJAX callback event handler. Here is how I do it with jQuery.

<script>
$(document).ready(function() {

    $('#buttonId').click(function() {
         $(this).attr('disabled', 'disabled');
         callAjax();
    });

});

function callAjax()
{
    $.ajax({
      url: 'ajax/test.html',
      success: function(data) {
         //enable button
         $('#buttonId').removeAttr('disabled');

      }
    });
}
</script>

edited Mar 04 '11 at 04:33

answered Mar 04 '11 at 04:22

rick schott

21,012
5
52
81

And where do you put this code? If it is a standalone script, how do you call it from the c# code-behind? – Zizzipupp Oct 25 '19 at 08:33
Could do either, tricky part is the Id is generated so you need to pass it into a function if put in a standalone script. – rick schott Oct 30 '19 at 13:13

score 1 · Answer 11 · answered Jul 05 '12 at 16:19

1

using jQuery:

$('form').submit(function(){
    $(':submit', this).click(function() {
        return false;
    });
});

answered Jul 05 '12 at 16:19

mtntrailrunner

761
6
11

score 1 · Answer 12 · answered Oct 22 '13 at 09:32

1

Try this, it worked for me

<asp:Button ID="button" runat="server" CssClass="normalButton" 
Text="Button"  OnClick="Button_Click" ClientIDMode="Static" 
OnClientClick="this.disabled = true; setTimeout('enableButton()', 1500);" 
UseSubmitBehavior="False"/>

Then

<script type="text/javascript">
function enableButton() {
document.getElementById('button').disabled = false;
}
</script>

You can adjust the delay time in "setTimeout"

answered Oct 22 '13 at 09:32

formidablecoder

19
1

Why `getElementById('button')` ? It woulb be ***<%= button.ClientID %>*** ? – Kiquenet Apr 11 '18 at 14:03

score 1 · Answer 13 · answered Nov 29 '16 at 11:06

This solution works if you are using asp.net validators:

<script language="javascript" type="text/javascript">
function disableButton(sender,group)
{
    Page_ClientValidate(group);
    if (Page_IsValid)
    {
        sender.disabled = "disabled";
        __doPostBack(sender.name, '');
    }
}</script>

and change the button:

<asp:Button runat="server" ID="btnSendMessage" Text="Send" OnClick="btnSendMessage_OnClick" OnClientClick="disableButton(this,'theValidationGroup')" CausesValidation="true" ValidationGroup="theValidationGroup" />

score 0 · Answer 14 · answered Nov 20 '12 at 14:44

This works with a regular html button.

    <input id="Button1"
    onclick="this.disabled='true';" type="button"
    value="Submit" name="Button1"
    runat="server" onserverclick="Button1_Click">

The button is disabled until the postback is finished, preventing double clicking.

score 0 · Answer 15 · answered Jun 05 '14 at 06:46

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

score 0 · Answer 16 · answered Mar 04 '11 at 04:22

0

You can do this with javascript. in your form tag, onsubmit="javascript:this.getElementById("submitButton").disabled='true';"

answered Mar 04 '11 at 04:22

steinberg

610
4
11

Disable asp.net button after click to prevent double clicking

16 Answers16

Linked