disable button using client side code

Question

User279786496 posted

I have a link button on the aspx page, and also an action button that looks like > . when I click on this I should see a message with gray box. it should not be an laert but friendly message saying that your request is being processing. and immediately the button or action button should be disabled. should not allow the users to click multiple times.

once the request is processed it should go to other page(Details.aspx) and display the details of the request - by using response. Redirect...

Here is my aspx code

   <asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="False" RenderMode="Inline"
 UpdateMode="Conditional">
<Triggers>
  <asp:AsyncPostBackTrigger ControlID="btnSearchReq" EventName="Click" /></Triggers>

<div class="actionbtn">
                    <div class="actionbtn_grey">
                        <div class="actionbtn_text">
                            <asp:LinkButton ID="btnSearchReq" runat="server" Text="Search" OnClick="btnSearchReq_Click"
                                ForeColor="blue" Style="text-decoration: none;">
                            </asp:LinkButton></div>
                    </div>
                    <div class="actionbtn_red" onclick="SrReqclick()">
                    </div>
                </div>

 $('#<%=btnSearchReq.ClientID%>').click(function (e) {
      });

<script type="text/javascript">

  function SrReqclick()

  {

  document.getElementById("<%= btnSearchReq.ClientID%>").click();

  }

 </script>

Answer 1

User-284744251 posted

If you don't want to show in alert box then you can have bootstrap modal and can disable popup using following code

$('#<%=btnSearchReq.ClientID%>').click(function (e) {
  $(this).prop('disabled', true);
  $("#mymodal").modal('show');

 });

Modal

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Your request is processed</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>