Question

I have a work code for one select field with other option, that displays a text box when other is selected. However, I’m having trouble writing the code for 2 select boxes on the same page.

Here is my script.

    function toggleField(val) {
      var o = document.getElementById('other');
      (val == 'Other') ? o.style.display = 'block': o.style.display = 'none';
    }

<SELECT NAME="i_skate" SIZE="1" ONCHANGE="toggleField(this.value);">
  <OPTION VALUE="Just a Fan">Just a Fan</OPTION>
  <OPTION VALUE="Everyday">Everyday</OPTION>
  <OPTION VALUE="Few times a Week">Few times a Week Week
  </OPTION>
  <OPTION VALUE="Few times a Month">Few times a Month Month
  </OPTION>
  <OPTION VALUE="Other">Other</OPTION>
</SELECT>
<INPUT TYPE="TEXT" NAME="other" ID="other" STYLE="display: none;" SIZE="20">
</TD>
<TD WIDTH="10" ALIGN="LEFT"></TD>
<TD WIDTH="110" ALIGN="LEFT" VALIGN="TOP">

  <SELECT NAME="my-style" SIZE="1" ONCHANGE="toggleField(this.value);">
    <OPTION VALUE="Street Skate">Street Skate</OPTION>
    <OPTION VALUE="Downhill">Downhill</OPTION>
    <OPTION VALUE="Freestyle">Freestyle</OPTION>
    <OPTION VALUE="Pools-Bowls">Pools-Bowls</OPTION>
    <OPTION VALUE="Vert Halfpipe">Vert Halfpipe</OPTION>
    <OPTION VALUE="Park">Park</OPTION>
    <OPTION VALUE="Mini Ramp">Mini Ramp</OPTION>
    <OPTION VALUE="Other1">Other1</OPTION>
  </SELECT>
  <INPUT TYPE="TEXT" NAME="other1" ID="other1" STYLE="display: none;" SIZE="20">

What am I missing?

Answer 1

If I’m understanding you correctly, you want to just have your second SELECT tag display the second INPUT box when “Other1” is selected, just like the first one does for “Other”.

You are really close, but your Javascript needs some adjusting. You are currently testing for the changed element of “Other”, and then altering the display for the object o which is a reference to the element with id of “other”. You will need to expand on this logic to include your new select box (with option of “Other1”) and the corresponding INPUT box.

So, you might need to do something like…

<SCRIPT TYPE="text/javascript">
function toggleField(val) {
  var o = document.getElementById('other');
  var o1 = document.getElementById('other1');
  (val == 'Other')? o.style.display = 'block' : o.style.display = 'none';
  (val == 'Other1')? o1.style.display = 'block' : o1.style.display = 'none';
}
</SCRIPT>

That will expand the same functionality from the first SELECT to the second.