CODEWITHSUNDEEP
c#asp.net
epiphany
epiphany

Reputation: 766

How to show or hide the text box depends on the drop down selection

When the selection of the dropdown is changed by the user, the corresponding textbox will show depends on user's selection. Let's say when user select "A" from the dropdown, the Textbox "A" will shown, while the other textbox will be invisible.

The issue is when user select "A" in the drop down, the other two text box won't disappear.

aspx

<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
        <asp:ListItem></asp:ListItem>
        <asp:ListItem Value="A" Text="A" />
        <asp:ListItem Value="B" Text="B" />
        <asp:ListItem Value="C" Text="C" />
</asp:DropDownList>


A <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
B <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
C <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

aspx.cs

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    if (DropDownList1.SelectedItem.Text == "A")
    {
         TextBox2.Visible = false;
         TextBox3.Visible = false;
    }
}

Upvotes: 0

Views: 2522

Answers (3)

dj079
dj079

Reputation: 1389

If your goal is just to toggle visibility of the textboxes based on drop down selection, you should write a JavaScript function on your page which will take index as parameter. Then it will change the visibility of the indexed text box to true and false for the other text boxes.

Something like this: 

Dropdown event: 
on-click=“return toggleText(selectedIndex);”

<script>
    function toggleText(index) {
        // show or hide textbox by setting it’s style display:block or display:none respectively 

        return false; // ensures the page is not posted-back to server
    }
</script>

Upvotes: 0

Ehsan Mohammadi
Ehsan Mohammadi

Reputation: 1228

It's not working because you should refresh your page. You should add AutoPostBack="true" property to your DropDownList.

Also, you can use UpdatePanel to don't need to refresh all your page.

In aspx use this:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="updatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
             <asp:ListItem></asp:ListItem>
             <asp:ListItem Value="A" Text="A" />
             <asp:ListItem Value="B" Text="B" />
             <asp:ListItem Value="C" Text="C" />
         </asp:DropDownList>

         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
         <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
         <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    </ContentTemplate>
</asp:UpdatePanel>

I hope it helps you

Upvotes: 1

Govind
Govind

Reputation: 26

Make all textbox properties set to visible false and then try in dropdown selection chagned event. 

<asp:TextBox ID="TextBox1" runat="server" visible="false"></asp:TextBox>

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
      if (DropDownList1.SelectedItem.Text == "A")
      {
            TextBox2.Visible = false;
      }
      else 
      {
            TextBox2.Visible = true;
      }
}

Upvotes: 1

Related Questions