Javascript: Making a textbox display if a dropdown option is selected

Question

Here's a screenshot of what I'm trying to accomplish:

Basically, if the user chooses "SFTP", a textbox should be displayed.

Here's the code I have:

<strong class="heading">Image Hosting</strong>
<div id="imagehosting">
    <form name="test">
        Does the client require our company to host their images? <br />
        <em>If you select this option, you'll have to specify what they will be using</em>
        <input type="checkbox" name="category_level" onchange="categorychanged(this.checked)" />

        <select name="category_parent" style="display:none" onchange="if(this.selectedIndex==SFTP){this.form['box'].style.visibility='visible'}else {this.form['box'].style.visibility='hidden'};">
            <option value="1">Library</option>
            <option value="2">SFTP</option>
        </select>
        <input style="visibility:hidden;" type="text" name="box">
    </form>
<br />
</div>

The function, "categorychanged", is handled by the following Javascript code:

<script language="JavaScript" type="text/javascript">
<!--
function categorychanged(enable) 
{
    if (enable) 
    {
        document.test.category_parent.style.display="block";
    }
    else 
    {
        document.test.category_parent.style.display="none";
    }
}
//-->
</script>

Right now, if I choose "SFTP", nothing happens. The first part works fine, ie dropdown displayed when the checkbox is selected.

What am I doing wrong here? Thanks

Answer 1

So, here's a fiddle with working code. The issue is the value you are checking against.

this.selectedIndex

can be just

this.value

But your code could also use some clean up. First off, unless you have some reason you are not doing so, I'd recommend a library like Prototype.js or jQuery . That's going to make your job a lot easier. I would also recommend using event listeners instead of inline events since they are cleaner.

Answer 2

You're using selectedIndex, which is a number representing the position of the option element

In this example, Library is 0 and SFTP is 1, so you're doing SFTP == 1, which obviously evaluates to false.

If you want to get the value of option, use

<script type="text/javascript>
function changeVisibility(element)
{
    var value = element[element.selectedIndex].value
    if(value == "SFTP")
        //show
    else
        //hide
}
</script>

<select onchange="changeVisibility(this)" >
    <option value="Library">Library</option>
    <option value="SFTP">SFTP</option>
</select>

Last, it's ok to write javascript like this when you still learning, but do not do this in a prodution environment... Learn a js library, such as jQuery, and completely separate javascript code from html... It's much cleaner to read and maintain

This is a jQuery equivalent

<script type="text/javascript>
$(function(){
    $("#myId").change(function(){
        if($(this).val() == "SFTP")
            //show
        else
            //hide
    });
});
</script>

<select id="myId">
    <option value="Library">Library</option>
    <option value="SFTP">SFTP</option>
</select>

Answer 3

The problem here is in the condition "if (this.selectedIndex==SFTP)". SelectedIndex will give only the index and not the value. To get the value, you have to do -

this.options[this.selectedIndex].value