locked
Change the value of a text box after changing an item in a dropdownlist RRS feed

  • Question

  • User350923160 posted

    Hello everyone,

    I have a webform that contains a dropdown list with 3 items and a text box that shows a number  that represents each item. For example, if the user chooses High from the drop down, the textbox should change to 1, if the user picks normal, textbox should change to 2 and if the user choses low, the textbox should display 3. The problem is I want to do this with AutoPostback = false of the dropdownlist. The reason why is because I have a session variable that gets reset to null after the page loads and renders everything and in the page loadeven I check if the session variable is null then redirect to a different page. To cut long story short, I want to change the value of the textbox based on the  user selection of the dropdown BUT WITHOUT postingback to the server.

    Any Ideas?

    Thank you. 

    Wednesday, May 10, 2017 5:36 PM

Answers

  • User2103319870 posted

    The webform I have is with a master page and when I implemented your code, it doesn't change the value of the textbox. I added a new webform that is not linked to a master page and it works fine but my form is linked with a master page. 

    Any Ideas?

    When using Master page the control id which render at runtime will change. You need to use ClientID property to access the controls at runtime.

    Change your code like below

        <script>
            $(document).ready(function () {
                $('#' + '<%= Dropdownlist1.ClientID %>').change(function () {
                    $('#' + '<%= TextBox3.ClientID %>').val($(this).val());
                });
            });
        </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 10, 2017 7:26 PM

All replies

  • User2103319870 posted

    aazizasp

    I want to change the value of the textbox based on the  user selection of the dropdown BUT WITHOUT postingback to the server.

    You should be able to acheive your requiremet using Jquery like below. Here we use the onchange event in dropdownlist to read the selected value

    <asp:DropDownList ID="Dropdownlist1" runat="server">
                <asp:ListItem Text="Select" Value=""></asp:ListItem>
                <asp:ListItem Text="High" Value="1"></asp:ListItem>
                <asp:ListItem Text="Normal" Value="2"></asp:ListItem>
                <asp:ListItem Text="Low" Value="3"></asp:ListItem>
            </asp:DropDownList>
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

    Jquery code to assign the value to textbox

     <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
        <script>
            $(document).ready(function () {
                $("#Dropdownlist1").change(function () {
                    $("#TextBox3").val($(this).val());
                });
            });
        </script>
    Wednesday, May 10, 2017 6:49 PM
  • User350923160 posted

    Hi A2H,

    Your solution works beautifully if it is a normal web form. The webform I have is with a master page and when I implemented your code, it doesn't change the value of the textbox. I added a new webform that is not linked to a master page and it works fine but my form is linked with a master page. 

    Any Ideas?

    Thanks in advance.

    Wednesday, May 10, 2017 7:12 PM
  • User2103319870 posted

    The webform I have is with a master page and when I implemented your code, it doesn't change the value of the textbox. I added a new webform that is not linked to a master page and it works fine but my form is linked with a master page. 

    Any Ideas?

    When using Master page the control id which render at runtime will change. You need to use ClientID property to access the controls at runtime.

    Change your code like below

        <script>
            $(document).ready(function () {
                $('#' + '<%= Dropdownlist1.ClientID %>').change(function () {
                    $('#' + '<%= TextBox3.ClientID %>').val($(this).val());
                });
            });
        </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 10, 2017 7:26 PM
  • User350923160 posted

    Super!!!

    Thanks very much. It works perfectly.

    Thursday, May 11, 2017 12:15 PM