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

Question

Here's a screenshot of what I'm trying to accomplish: enter image description here

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, i.e. dropdown displayed when the checkbox is selected.

What am I doing wrong here? Thanks

LoveAndCoding · Accepted Answer · 2011-10-14 20:09:57Z

2

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.

answered Oct 14, 2011 at 20:09

LoveAndCoding

7,9473 gold badges34 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ray Over a year ago

That worked... thank you! As for using a library, as you can tell, my javascript skills are at the newb level. And this site is just a mockup anyway, but it's something I'll consider. Thanks again.

LoveAndCoding Over a year ago

No problem. And I would recommend a library especially if you're new to it. Libraries make cross-browser code easier, and can make a lot of things you have to do a lot much much easier. Plus the Sizzle selector engine in both is fantastic for finding elements. :)

Ray Over a year ago

Good to know @Ktash. Yet another interesting feature to explore!

Ortiga · Accepted Answer · 2011-10-14 20:17:47Z

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>

answered Oct 14, 2011 at 20:17

Ortiga

8,8466 gold badges45 silver badges74 bronze badges

1 Comment

Ray Over a year ago

+1 for taking the trouble to explain the production method. Thank you @Andre

Vivek Viswanathan · Accepted Answer · 2011-10-14 20:08:39Z

1

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

answered Oct 14, 2011 at 20:08

Vivek Viswanathan

1,96318 silver badges26 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related