How to have two drop down menus that when "other" is selected a textbox appear?

[hineslma]

Hey can anyone please help?

 

I making this form on my website and I have two drop down lists, one is for sizes and the other is for colors. They both have an option for "other" and I'm wanting a textbox to appear when "other" is selected. I got the first drop down to work but I can't figure out how to get the second one to work without messing with the first. Here is the code I have please help:

 

 

<form name="form1" method="post" action="">

 

<script type="text/javascript">

function showfield(name){

  if(name=='Other')document.getElementById('div1').innerHTML='Other: <input type="text" name="other" />';

  else document.getElementById('div1').innerHTML='';

}

</script>

 

<p>Size:

<select name="size" id="size" onchange="showfield(this.options[this.selectedIndex].value)">

<option selected="selected">Please select ...</option>

<option value="1' H X 6" W">2' H X 1' 6" W</option>

<option value="1' H X 2' W">1' H X 2' W</option>

<option value="1' H X 1' 4" W">1' H X 1' 4" W</option>

<option value="Other">Other</option>

</select>

<div id="div1"></div>

 

<p>Color:

<select name="Color" id="Color" onchange="showfield(this.options[this.selectedIndex].value)">

<option selected="selected">Please select ...</option>

<option value="Walnut Stain/Dark Brown">Walnut Stain/Dark Brown</option>

<option value="Tan">Tan</option>

<option value="Walnut">Walnut</option>

<option value="Other">Other</option>

</select>

<div id="div1"></div>

</p>

[cyberRobot]

You'll need to use a different id label for the second <div> tag. They can't both be set to "div1".

 

Also, for future posting please surround code using the [ code ][ /code ] tag (without the spaces). It makes the posts easier to read. 

[cyberRobot]

OK, I took a closer look at the code and there are a few other issues. The following code works for me:

 

<form name="form1" method="post" action="">

<script type="text/javascript">
function showfield(activeDropDown) {
     var activeDropDown_selectedValue = activeDropDown.options[activeDropDown.selectedIndex].value;
     if(activeDropDown.name == 'size' && activeDropDown_selectedValue == 'Other') {
          document.getElementById('div1').innerHTML = 'Other: <input type="text" name="size_other" />';
    } else if(activeDropDown.name == 'Color' && activeDropDown_selectedValue == 'Other') {
          document.getElementById('div2').innerHTML = 'Other: <input type="text" name="Color_other" />';
    }
}
</script>

<p>Size:
<select name="size" id="size" onchange="showfield(this)">
<option selected="selected">Please select ...</option>
<option value="1' H X 6" W">2' H X 1' 6" W</option>
<option value="1' H X 2' W">1' H X 2' W</option>
<option value="1' H X 1' 4" W">1' H X 1' 4" W</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>

<p>Color:
<select name="Color" id="Color" onchange="showfield(this)">
<option selected="selected">Please select ...</option>
<option value="Walnut Stain/Dark Brown">Walnut Stain/Dark Brown</option>
<option value="Tan">Tan</option>
<option value="Walnut">Walnut</option>
<option value="Other">Other</option>
</select>
<div id="div2"></div>
</p>

 

 

Note the changs to the <select> and <div> tags. I've also made several changes to the JavaScript. The code is still a little crude, but it should get you rolling.

[hineslma]

Yes that works great. Thank you.