Display Textbox depending upon the value slected in drop down list RSS

• • Reply
  

  athelli_redd...

  Member

  8 Points

  55 Posts

  Display Textbox depending upon the value slected in drop down list

  Jun 02, 2012 01:40 PM|LINK

  I want to display a <asp:Textbox> depending upon the value slected in <asp:DropDownList> (Example: 1). I want do this from client side using Java Script or anythign else but not on postback. If i select any other value in DropDownList, do not show Textbox.

  Can someone please send me the code???

  thank you very much in advance.

  This is my Default.aspx page:

  <script type="text/javascript">
      function DisplayConditionalTextbox()

         {
              I NEED THE CODE AND LOGIC HERE
         }
  </script>

  <asp:DropDownList ID="NewsSourceDdl" runat="server">
                                                  <asp:ListItem >1 </asp:ListItem>
                                                  <asp:ListItem >2 </asp:ListItem>
                                                  <asp:ListItem >3 </asp:ListItem>
                                                  <asp:ListItem >4 </asp:ListItem>
  </asp:DropDownList>

  <asp:TextBox ID="ConditionalTextbox" runat="server"> </asp:TextBox>

• • Reply
  

  roopeshreddy

  All-Star

  20143 Points

  3327 Posts

  Re: Display Textbox depending upon the value slected in drop down list

  Jun 02, 2012 01:55 PM|LINK

  Hi,

  Check the below code!

  <asp:DropDownList ID="NewsSourceDdl" runat="server" onchange="DisplayConditionalTextbox();" >
                                                  <asp:ListItem >1 </asp:ListItem>
                                                  <asp:ListItem >2 </asp:ListItem>
                                                  <asp:ListItem >3 </asp:ListItem>
                                                  <asp:ListItem >4 </asp:ListItem>
  </asp:DropDownList>
   
  <asp:TextBox ID="ConditionalTextbox" runat="server"> </asp:TextBox>
  
  
  <script type="text/javascript">
      document.getElementById("<%=ConditionalTextbox.ClientID %>").style.display = "none";
      function DisplayConditionalTextbox() {
          var ddlID = document.getElementById("<%=NewsSourceDdl.ClientID %>");
          if (ddlID.options[ddlID.selectedIndex].value == 1) {
              document.getElementById("<%=ConditionalTextbox.ClientID %>").style.display = "block";
          }
      }
   
  
      </script>

  Hope it helps u...

  Thanks & Regards
  Roopesh Reddy C
  Roopesh's Space
  
  • Marked as answer by BU XI - MSFT on Jun 08, 2012 03:25 AM
• • Reply
  

  athelli_redd...

  Member

  8 Points

  55 Posts

  Re: Display Textbox depending upon the value slected in drop down list

  Jun 02, 2012 02:22 PM|LINK

  Thanks Reddy.

  Does this code workd if the controls are in <asp:CreateUserWizard> ???

• • Reply
  

  roopeshreddy

  All-Star

  20143 Points

  3327 Posts

  Re: Display Textbox depending upon the value slected in drop down list

  Jun 03, 2012 03:35 AM|LINK

  Hi,

  For accessing the content in the CreateUserWizard, check the following link!

  http://forums.asp.net/t/1581824.aspx/1

  Hope it helps u...

   

   

  Thanks & Regards
  Roopesh Reddy C
  Roopesh's Space
  
  • Marked as answer by BU XI - MSFT on Jun 08, 2012 03:25 AM
• • Reply
  

  Ruchira

  All-Star

  42940 Points

  7024 Posts

  MVP

  Re: Display Textbox depending upon the value slected in drop down list

  Jun 03, 2012 01:15 PM|LINK

  Hello,

  Try this then

  <asp:DropDownList ID="NewsSourceDdl" runat="server" onchange="DisplayConditionalTextbox();" >
          <asp:ListItem >1 </asp:ListItem>
          <asp:ListItem >2 </asp:ListItem>
          <asp:ListItem >3 </asp:ListItem>
          <asp:ListItem >4 </asp:ListItem>
  </asp:DropDownList>
   
  <asp:TextBox ID="ConditionalTextbox" runat="server" style="display:none"> </asp:TextBox>
  
  <script type="text/javascript">
      function DisplayConditionalTextbox() {
          if ($("#<%=((DropDownList)RegisterUser.CreateUserStep.ContentTemplateContainer.FindControl("NewsSourceDdl")).ClientID%> option:selected").text() == "1") {
              $("#<%=((TextBox)RegisterUser.CreateUserStep.ContentTemplateContainer.FindControl("ConditionalTextbox")).ClientID%>").show();
          }
          else
             $("#<%=((TextBox)RegisterUser.CreateUserStep.ContentTemplateContainer.FindControl("ConditionalTextbox")).ClientID%>").hide();
      }
  </script>

  Please 'Mark as Answer' if this post helps you.

  My Tech blog | My YouTube Channel
  • Edited by Ruchira on Jun 03, 2012 01:15 PM
  • Edited by Ruchira on Jun 03, 2012 01:16 PM