How to disable ASP.Net button after click (prevent double clicking)

There could be two possible options you can apply to disable asp.net button after click to keep user from double clicking. Simple disabling the button won't help because you may also have to deal with client side validation on form controls.

For example, we have following markup with asp.net textbox and button.

 <div class="col-md-6">
  <div class="form-group">
   <label>
    User Name: 
    <asp:RequiredFieldValidator runat="server" ControlToValidate="txtUserName" ErrorMessage="Required"
     CssClass="Validator" SetFocusOnError="True" ValidationGroup="SaveUser">*</asp:RequiredFieldValidator>
   </label>
   <asp:TextBox ID="txtUserName" runat="server" class="form-control" ></asp:TextBox>
  </div>
 </div>

 <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" CssClass="btn btn-primary" ValidationGroup="SaveUser"/>

We have to disable this asp.net button after clicking. Following options will help you prevent double click problem while also considering client side validation.

• First option is to use OnClientClick event of asp.net button. We have to return false if client validation failed, else we will disable the button and optionally change the button text to indicate some progress. We also have to set UseSubmitBehavior property value to false. Final markup for the button will be:

     <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" CssClass="btn btn-primary" ValidationGroup="SaveUser"
      OnClientClick="if (!Page_ClientValidate()){ return false; } this.disabled = true; this.value = 'Saving...';" 
      UseSubmitBehavior="false"
     />
    

• Second option is to disable the button on post back event from JavaScript, i.e. window.onbeforeunload. Here is the button markup and script which sets button's disabled property, optionally you can also change button's text to indicate progress for post back event.

     <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" CssClass="btn btn-primary" ValidationGroup="SaveUser"/>
    

    <script type = "text/javascript">
     function disableButton() {
      document.getElementById("<%=btnsave.ClientID %>").disabled = true;
      document.getElementById("<%=btnsave.ClientID %>").value = 'Saving...';
     }
     window.onbeforeunload = disableButton;
    </script>
    

I hope this helps some of you who get stuck with a similar problem.

jQuery - Find elements with multiple attribute values.

In this post we will see how to write selector string with multiple attribute values. For example, I have <ul> element with a number of child <li> elements, have placed this <ul> element inside <div> with id='#divItems'. An example layout may be like this:

 <div id="divItems">
  <ul>
   <li id="1" data-accountid="1" data-branch="1"<Item1>/li>
   <li id="2" data-accountid="1" data-branch="1"<Item1>/li>
   <li id="3" data-accountid="1" data-branch="3"<Item1>/li>
   <li id="4" data-accountid="2" data-branch="1"<Item1>/li>
   <li id="5" data-accountid="2" data-branch="2"<Item1>/li>
   <li id="6" data-accountid="3" data-branch="1"<Item1>/li>
   <li id="7" data-accountid="3" data-branch="2"<Item1>/li>
   <li id="8" data-accountid="3" data-branch="3"<Item1>/li>
   <li id="9" data-accountid="4" data-branch="1"<Item1>/li>
   <li id="10" data-accountid="4" data-branch="2"<Item1>/li>
   
  </ul>
 </div>

In jQuery you can select desired element for single attribute value (say id), like this:

 var liObject = $("#divItems ul li[id='2']);

You can also find by your own custom data attribute if it is being specified with the element, lets say each li element has attribute data-accountid. Syntax will be same.

 var liObject = $("#divItems ul li[data-accountid='3']);

Take another step, you can specify multiple attributes in selector string. Lets say you can have multiple li elements with data-accountid='3', but you also want to narrow down your filter criteria by further looking for another attribute data-branchid. Here is how you can specify multiple attributes.

 var liObject = $("#divItems ul li[data-accountid='3'][data-branchid='1']);

Similarly you can add any number of attribute filters in selector string.

I hope this helps some of you who get stuck with a similar problem.