locked
Asp.net button with single click and not multiple clicks RRS feed

  • Question

  • User-944424728 posted
    I have a "next" button which gray out after click next so the screen reader read "NEXT IS DISABLED". How can I disable "NEXT IS DISABLED" from screen reader? I tried aria-hidden=true or aria-disabled=true but it did not work. Please advise. Thanks.

    --

    <asp:Label ID="lblNext" runat="server" Text="&nbsp;" Visible="False" />
    <GSI:GSIButton ClickOnce="true" ID="btnNext" runat="server" aria-disabled="true" CssClass="formbutt" OnClick="GotoNextPage" Text="<%$ Resources: Resource, _Next %>" aria-label="<%$ Resources:Resource,lbtnNext %>" />

    Protected Sub GotoNextPage(ByVal sender As Object, ByVal e As System.EventArgs)
    _GoNextEventHandler.Invoke(sender, e)
    End Sub
    Public Property ClickOnce As Boolean
    Get
    Return _ClickOnce
    End Get
    Set(value As Boolean)
    _ClickOnce = value
    End Set
    End Property
    Private Sub EmitClickOnceJS()
    If ClickOnce Then
    Dim js As New StringBuilder

    'function to disable button if it was then element which caused postback
    js.AppendLine("<script type='text/javascript'>")
    js.AppendFormat("function DisableButton_{0}()", Me.ClientID)
    js.AppendLine("{")
    js.AppendFormat(" if(document.activeElement.id=='{0}') document.getElementById('{0}').disabled=true;", Me.ClientID)
    js.AppendLine()
    js.AppendLine("}")

    'ensure this function is caused when posting back using before unload
    js.AppendFormat("$(window).on('beforeunload',DisableButton_{0})", Me.ClientID)
    js.AppendLine()

    'async begin request disable if this button was cause of postback
    js.AppendLine("var postbackElement;")
    js.AppendLine("$(document).ready(function(){")
    js.AppendLine(" try {")
    js.AppendLine(" Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function(sender,args)")
    js.AppendLine(" {")
    js.AppendLine(" postbackElement = args.get_postBackElement();")
    js.AppendFormat(" if(postbackElement.id=='{0}') document.getElementById('{0}').disabled=true;", Me.ClientID)
    js.AppendLine(" });")
    js.AppendLine(" }catch(e){}")
    js.AppendLine("});")

    'async end request enable if this was the button which caused postback
    js.AppendLine("$(document).ready(function(){")
    js.AppendLine(" try {")
    js.AppendLine(" Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender,args)")
    js.AppendLine(" {")
    js.AppendFormat(" if(postbackElement.id=='{0}') document.getElementById('{0}').disabled=false;", Me.ClientID)
    js.AppendLine(" });")
    js.AppendLine(" }catch(e){}")
    js.AppendLine("});")
    js.AppendLine("</script>")

    'register the js
    If Not Page.ClientScript.IsClientScriptBlockRegistered(String.Format("disable{0}", Me.ClientID)) Then
    Page.ClientScript.RegisterClientScriptBlock(Page.GetType, String.Format("disable{0}", Me.ClientID), js.ToString())
    End If

    End If

    End Sub
    Thursday, May 2, 2019 2:54 AM

All replies

  • User283571144 posted

    Hi aspvbnet,

    According to your question, I guess you want to disable the button and change the text on the button into ‘NEXT IS DISABLED’ after clicking GSIBUTOON once.

    Could you please tell me what  is GSI:GSIButton control? Could you please share the library link about  the GSI:GSIButton?

    Could you please post more details information about the _GoNextEventHandler.Invoke(sender, e) method? 

    If you just want to disable the button after click the next button, I suggest you could use  front-end jQuery to achieve your requirement.

    More details, you could refer to below codes:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <title></title>
        <script type="text/javascript">
            $(document).ready(function () {
                if ($("#btnNext").val() == "NEXT IS DISABLED") {
                      $("#btnNext").attr("disabled", "disabled");
                }
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:Label ID="lblNext" runat="server" Text="&nbsp;" Visible="False" />
                <asp:Button ID="btnNext" runat="server" CssClass="formbutt" Text="Next"  OnClick="btnNext_Click"/>
            </div>
        </form>
    </body>
    </html>
    

    Code-behind:

    protected void btnNext_Click(object sender, EventArgs e)
    {
      this.btnNext.Text = "NEXT IS DISABLED";
    }
    
    

    Result:

    Best Regards,

    Brando

    Thursday, May 2, 2019 7:42 AM
  • User-944424728 posted

    Hello, GSIbutton is a custom user control replace with

    <asp:Button ID="btnNext" runat="server" CssClass="formbutt" OnClick="GotoNextPage" Text="<%$ Resources: Resource, _Next %>" />

    I'm not only disable the screen reader to read "NEXT is disabled" but with "Back" button as well-"Back is disabled"

    <asp:Button ID="btnPrev" runat="server" CssClass="formbutt" OnClick="GotoPreviousPage" CausesValidation="false" Text="<%$ Resources: Resource, Back %>" />

    -- I tried your code below but it did not work after you click once

    <asp:Button ID="btnNext" runat="server" CssClass="formbutt" OnClick="GotoNextPage" Text="<%$ Resources: Resource, _Next %>" />
    <script type="text/javascript">
    $(document).ready(function () {

    $("#btnNext").attr("disabled", "disabled");

    });

    -- Please advise using these 2 asp buttons below, how can I disable after the first click without the screen reader read "BACK" or "NEXT IS disabled" after the first click.  Thank you.

    <asp:Button ID="btnNext" runat="server" CssClass="formbutt" OnClick="GotoNextPage" Text="<%$ Resources: Resource, _Next %>" />

    <asp:Button ID="btnPrev" runat="server" CssClass="formbutt" OnClick="GotoPreviousPage" CausesValidation="false" Text="<%$ Resources: Resource, Back %>" />

    Thursday, May 2, 2019 1:46 PM
  • User283571144 posted

    Hi  aspvbnet,

    After clicking the Next button, you want to disable the Next button and the Back button, and then change their text value to " Back is disabled" and  "NEXT IS disabled", right?

    If so, you can set disable attribute and modify the text property  for these two buttons in the click event of the button. Below is my code, you can refer to it, I hope it will help you.

    <asp:Button ID="btnNext" runat="server" CssClass="formbutt" OnClick="btnNext_Click" Text="Next" />
    <asp:Button ID="btnPrev" runat="server" CssClass="formbutt" OnClick="btnPrev_Click" CausesValidation="false" Text="Back" />
    

    Code behind

    protected void btnNext_Click(object sender, EventArgs e)
    {
      this.btnNext.Attributes["disabled"] = "disabled";
      this.btnPrev.Attributes["disabled"] = "disabled";
      this.btnPrev.Text = "NEXT is disabled";
      this.btnNext.Text = "Back is disabled";
    }
    

    Test Result:

    Best Regards,

    Brando

    Friday, May 3, 2019 6:23 AM