Hey guys.

I'm tyring to create a form which, amongst other things, has a dropdown box and a textbox.

What I'm trying to do is have the textbox either hidden or disabled unless a certain option in the dropdown box is selected.

I've searched for a tutorial and found a few but can't seem to get any of them to work.

If anyone knows how to do this I'd really appreciate the help.

Recommended Answers

All 3 Replies

Hi,
A bit of javascript is needed. Short intro:

<select name="my_select" id="my_own_select" onchange="showmytextbox();">
  <option value="1" selected="selected">Hide</option>
  <option value="2">Show</option>
</select>
<input type="text" name="my_textbox" id="my_own_textbox" style="display: none;" />

This is part of the form. The select has an id and a function. The textbox is not being displayed. Once the SELECT is changed, the following javascript is activated. If you select "Hide", the textbox remains hidden or is switched to hidden. If you select "Show", the textbox is or remains shown.

<script>
function showmytextbox()
{
   if (document.getElementById('my_own_select').value == 2 ){
       document.getElementById('my_own_textbox').style.display = 'block';}
   else {document.getElementById('my_own_textbox').style.display = 'none';
}
</script>

I didn't test the code, please make corrections if necessary.

All the best,
albasiba

<select name="my_select" id="my_own_select" onchange="showmytextbox();">
<option value="1" selected="selected">Hide</option>
<option value="2">Show</option>
</select>
<input type="text" name="my_textbox" id="my_own_textbox" style="display: none;" />

its not working :(

-The html / asp part -

 <asp:DropDownList ID="DropDownList" onchanged="enableTextBox();" runat="server">                            
            <asp:ListItem Text="" ></asp:ListItem>
            <asp:ListItem Text="Yes" ></asp:ListItem>    
            <asp:ListItem Text="No" ></asp:ListItem>                       
        <asp:DropDownList> 

        <asp:TextBox ID="TextBox" Enabled="false"></asp:TextBox>

-the javascript part-

function enableTextBox()
{
    if(document.getElementById("DropDownList").value == "Yes")
    {
        TextBox.disabled == false;
    }
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.