How to show a text box based on a menu selection 1

[eaglesphan]

First, I know this has probably been answered many times before but the search feature on the forum is undergoing maintenance.

I have a dynamically generated list box and the last option is Other (a static option). If any choice but Other is selected, nothing happens, form gets submitted as normal. But if Other is selected, then I want a text box to appear after the menu so the person can put what the Other is.

So the text box starts out as hidden when the form first loads but if Other is selected then it appears in the form and everything else goes on normally.

I've seen this before in the past and I've Googled but I can't remember the magic words for what this process is called so I'm not finding what I need.

 

[cLFlaVA]

The function:

function showHide(s) {
  if (s.selectedIndex == s.options.length - 1)
    document.forms['f'].elements['other'].style.display = '';
  else
    document.forms['f'].elements['other'].style.display = 'none'; 
}

The html:

<form name="f">
  <select name="s" onchange="showHide(this);">
    <option>First</option>
    <option>Second</option>
    <option>Other...</option>
  </select>
  <input type="text" name="other" style="display: none;" />
</form>

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

 

[eaglesphan]

Cool! But since I am a JavaScript klutz, can you check me? Once I get this working, I'm going to save it in my snippits.
Function:

function showHide(Department) {
  if (Department.selectedIndex == Department.options.length - 1)
    document.forms['contactus'].elements['Other'].style.display = '';
  else
    document.forms['contactus'].elements['Other'].style.display = 'none';
}

And my form. Ummm...can I include the sentence above the text box somehow in the show/hide deal? Also, I'm thinking I made a mistake on the showHide(Department) part but I don't know what I should put instead.

<form action="contactus.php" method="post" name="contactus" id="contactus">
            <p>Department
              <select name="Department" id="Department" onchange="showHide(Department);">
                <?php
do {  
?>
                <option value="Whole bunch of php code for the dynamic part of the list box"
  }
?>
				<option value="Other">Other</option>
              </select>
              </p>
Show/Hide part from here....
            <p>If other, then what area:
              <input name="Other" type="text" id="Other" size="25" style="display: none;" /> 
            </p>
.....to here
            <p>Please comment in the space below:<br>
              <textarea name="Comment" cols="100" wrap="VIRTUAL" id="Comment"></textarea> 
            </p>
<input type="submit" name="Submit" value="Submit">
          </form>

 

[chessbot]

[red]<div id="other" style="display: none;">[/red]
Show/Hide part from here....
            <p>If other, then what area:
              <input name="Other" type="text" id="Other" size="25" style="display: none;" />
            </p>
.....to here
[red]</div>[/red]

function showHide(Department) {
  if (Department.selectedIndex == Department.options.length - 1)
    document.[red]getElementById('other')[/red].style.display = '';
  else
    document.[red]getElementById('other')[/red].style.display = 'none';
}

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakesperean sonnet.

 

[eaglesphan]

Tada TADA!!! You all are the best! This piece solves a LOT of little headaches for me and it's going right in my snippits. It worked like a champ. Thanks so much!

 

[dickieblack]

Hi,

Could this code be easily mopdified to cope with the option revealing the text area being somewhere other than last in the option group? Could it be first, second or any place on the list?

I can see how the javascript evaluates which option has selected from its position in the list, but I don't know enough to change this to evaluate it based on the value instead.

I would like for the user to be able to click the 'Yes' option (or any option specified) and I would also like to use this on a number of option groups and text areas. For example:


<p>Did you tell someone about this event?</p>
<select name='tell' id='tell' onchange='showhide(tell);'>
<option value='No'>No</option>
<option value='Yes'>Yes</option>
<option value='Withold'>Withhold Response</option>
</select>

<div id='tell_yes' style="display:none;">
<textarea name='tell' cols='100'>Please give details of what you said
</textarea>
</div>

<p>Did you recieve feedback about this event?</p>
<select name='recieve' id='recieve' onchange='showhide(recieve);'>
<option value='No'>No</option>
<option value='Yes'>Yes</option>
<option value='Withold'>Withhold Response</option>
</select>

<div id='recieve_yes' style="display:none;">
<textarea name='tell' cols='100'>Please give details of the advice you received</textarea>
</div>

Feel free to reply and tell me I'm not being clear...

Thanks in advance,

Richard

 

[chessbot]

<script type="text/javascript">
<!--

function showHide(sel, targ_id) 
{
  var opt = sel.options[sel.selectedIndex]; 
  var targ = document.getElementById(targ_id);
  if (opt.value == "Yes")
    targ.style.display = "";
  else
    targ.style.display = "none";
}

// -->
</script>
...
<p>Did you tell someone about this event?</p>
<select name='tell' id='tell' onchange="[red]showhide(this, 'tell_yes');[/red]">
<option value='No'>No</option>
<option value='Yes'>Yes</option>
<option value='Withold'>Withhold Response</option>
</select>

<div id='tell_yes' style="display:none;">
<textarea name='tell' cols='100'>Please give details of what you said
</textarea>
</div>

<p>Did you receive feedback about this event?</p>
<select name='receive' id='receive' onchange="[red]showhide(this, 'receive_yes');[/red]">
<option value='No'>No</option>
<option value='Yes'>Yes</option>
<option value='Withold'>Withhold Response</option>
</select>

<div id='receive_yes' style="display:none;">
<textarea name='tell' cols='100'>Please give details of the advice you received</textarea>
</div>

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.

 

[cidlee]

How could the above script work on NS4 and IE4 and Opera5?

Thanks