Member Avatar for HayLift

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.

  • 4 Contributors
  • 3 Replies
  • 532 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by Hiky

Dani AI

Generated

A few practical points and a compact example you can drop into the page.

Use unobtrusive JavaScript and set the initial state when the DOM is ready. Toggling the element’s disabled property is usually better for accessibility than flipping display:none (disabled fields are still visible but not editable). Note: disabled inputs are not submitted with the form — if you need the value sent even when the field is inactive, use readonly or keep a hidden input that you sync before submit. Always enforce the same rules server‑side too.

<select id="status" name="status">
  <option value="">Choose…</option>
  <option value="yes">Yes</option>
  <option value="no">No</option>
</select>

<input id="extra" name="extra" type="text" disabled aria-hidden="true">

<script>
document.addEventListener('DOMContentLoaded', function () {
  var sel = document.getElementById('status');
  var txt = document.getElementById('extra');

  function update() {
    var show = sel.value === 'yes';
    txt.disabled = !show;
    txt.setAttribute('aria-hidden', String(!show));
    if (!show) txt.value = '';
    else txt.focus();
  }

  sel.addEventListener('change', update);
  update(); // set initial state
});
</script>

Troubleshooting and notes tied to earlier replies: ’s inline onchange approach is fine if the handler exists and runs after the elements are parsed. ’s “not working” usually means the script ran too early or IDs don’t match. ’s ASP.NET snippet has two common mistakes: the client event is onchange (not onchanged) and TextBox.disabled == false is a comparison, not an assignment. With server controls remember ASP.NET changes client IDs — either set ClientIDMode="Static" or reference document.getElementById('<%= DropDownList.ClientID %>').

Finally, validate on the server, test with the browser console (F12) for errors, ensure unique IDs, and add aria-hidden/aria-disabled so screen readers get the right state.

Recommended Answers

All 3 Replies

Member Avatar for Baradaran

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

Edited by Baradaran because: Posted too early
Member Avatar for htahir80

<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 :(

Member Avatar for Hiky

-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;
    }
}
Edited by Hiky
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.