Show drop down if text box has value

Question

I need to show drop down only if any value is provided in text box, other wise the drop down should be hidden. I tried the following code with javascript but it is not working. With this code, the drop down is not hidden when there no value is typed in text box field. It is showing all the time.

<input type="text" name="example_textbox" id="textboxId" onclick="javascript:onTextboxChange()" >

<select name="example_dropdown" id="dropdownId" >
   <option selected value="0">Select One</option>
   <option value="Option1">Option1</option>
   <option value="Option2">Option2</option>
   <option value="Option3">Option3</option>
      </select>

<script type="text/javascript">
var getTextBox = document.getElementById('textboxId');
var getDropDown = document.getElementById('dropdownId');

function onTextboxChange(){
    if (getTextBox.value != null)
        {
        getDropDown.disable='false';
        //getDropDown.style.display = 'inline';
        }
    else{
        //getDropDown.style.display = 'none';
        getDropDown.disable='false';
    }
}

Any suggestion what should I do to make it work?

Answer 1

For starters, you don't need the "javascript" part in the handler:

<input type="text" name="example_textbox" id="textboxId" onclick="onTextboxChange()" >

You probably also want to check against an empty string and not just null as well:

if (getTextBox.value != null && getTextBox.value != '')

I'm not sure about a disable property (not to mention both conditions set it to the same value), but your styling changes work:

if (getTextBox.value != null && getTextBox.value != '') {
    getDropDown.style.display = 'inline';
} else {
    getDropDown.style.display = 'none';
}

With those changes in place, it seems to be working . Though it's strange that this is happening on a click event in an input . Maybe you meant the change event? Or even the keyup event?

Answer 2

You need to bind the function with the oninput event of the input-box

Also you need to hide the dropdown initially on the page-load.

 var getTextBox = document.getElementById('textboxId'); var getDropDown = document.getElementById('dropdownId'); onTextboxChange(); function onTextboxChange() { if (getTextBox.value != null && getTextBox.value != '') { getDropDown.style.display = 'inline-block'; } else { getDropDown.style.display = 'none'; } } 

 #textboxId { display:inline-block; position:absolute; top:0px; left:10px; } select { display:inline-block; position:absolute; top:0px; left:250px; } 

 <input type="text" name="example_textbox" id="textboxId" oninput="onTextboxChange()"> <select name="example_dropdown" id="dropdownId"> <option selected value="0">Select One</option> <option value="Option1">Option1</option> <option value="Option2">Option2</option> <option value="Option3">Option3</option> </select>