locked
disabling controls based on first textbox value RRS feed

  • Question

  • User-153404742 posted

    I don't think this is gonna work on server side so trying to see how it would work in javascript.  I have a dropdown1 and textbox1 along with dropdown2 and textbox2 controls on the same page.   I want to disable the dropdown2 and textbox2 controls based on whether the value typed in textbox1 is string or not.  If textbox1 has string value, then I want to disable the dropdown2 and textbox2 controls.  User won't click on anything...they'll select the dropdown1 value first and then type in the textbox so I can't use the selectedIndexchanged on first ddl control to handle this...is there a way to check this on every key stroke the user enters on textbox2 to see if it encounters a string input?  Also, user could enter a decimal like 3.2 but that should NOT disable the 2nd dropdown and textbox...so basically anything that's not an int, double or floating point value needs to disable the 2nd ddl and textbox.

    Tuesday, May 18, 2021 4:29 PM

All replies

  • User-1330468790 posted

    Hi inkaln,

    is there a way to check this on every key stroke the user enters on textbox2 to see if it encounters a string input?

    Actually you can do it from javascript side, one of suggestions would be using 'input' event with a regex rule, '/^\d*(\.\d+)?$/':

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

     

    More details, you can refer to below codes.

    aspx page:

     <form id="form1" runat="server">
            <div>
                <asp:DropDownList ID="dropdown1" runat="server">
                    <asp:ListItem Value="1" Text="A"></asp:ListItem>
                    <asp:ListItem Value="2" Text="B"></asp:ListItem>
                    <asp:ListItem Value="3" Text="C"></asp:ListItem>
                </asp:DropDownList>
                <asp:TextBox ID="textbox1" runat="server"></asp:TextBox>
            </div>
            <div>
                <asp:DropDownList ID="dropdown2" runat="server">
                    <asp:ListItem Value="1" Text="AA"></asp:ListItem>
                    <asp:ListItem Value="2" Text="BB"></asp:ListItem>
                    <asp:ListItem Value="3" Text="CC"></asp:ListItem>
                </asp:DropDownList>
                <asp:TextBox ID="textbox2" runat="server"></asp:TextBox>
            </div>
    
        </form>
        <script>
           
    
            $('#<%=textbox1.ClientID%>').on('input',function () {
                var val = $(this).val();
                console.log(val);
                var reg = /^\d*(\.\d+)?$/;
                if (!reg.test(val)) {
                    $('#<%=dropdown2.ClientID%>').prop("disabled", true);
                    $('#<%=textbox2.ClientID%>').prop("disabled", true);
                } else {
                    $('#<%=dropdown2.ClientID%>').prop("disabled", false);
                    $('#<%=textbox2.ClientID%>').prop("disabled", false);
                }
    
            })
        </script>

    Demo:

     

    Hope helps.

    Best regards,

    Sean

    Wednesday, May 19, 2021 6:16 AM