Show/Hide text and form field based on drop down selection

Hi

I'm trying to show/hide a simple piece of text and a text field on a
form based on what choice is made from a drop down box.

<select name="dropdown" size="1">
<option selected value="">Please make a selection</option>
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
<option value="4">Other</option>
</select>

i.e. if Choice 2 is selected I'd like to display a new <tr> with the
following:

<tr>
<td>New text field:</td>
<td><input name="newField" type="text size="20"></td>
</tr>

if any other choices are made, I don't want to display anything.
I've tried several onchange() functions but can't achieve what I'm
looking for.

Any help would be appreciated,
Steve

SilverSioux

Steve,
Did you ever get a response to your request? I need to do something similar. Please email me at ljhibbard@doit.nv.gov.
Thanks.
Linda

MrK

Try this script. It will hide/show table rows based on a selection. you can put whatever you want in the tbody areas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Show/Hide</title>
<script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
}
// ]]>
</script>
</head>

<body>
<table width="340" cellspacing="0" cellpadding="2">
<thead>
<tr>
<td class="title">Type:</td>
<td class="field">
<select name="type" onchange="display(this,'text','image');">
<option>Please select:</option>
<option value="image">Image</option>
<option value="text">Texts</option>
<option value="invisible">Invisible</option>
</select>
</td>
</tr>
</thead>
<tfoot>
<tr>
<td class="align-center" colspan="2"><input type="submit" name="submit" value="Update" /> <input type="reset" value="Reset" /></td>
</tr>
</tfoot>
<tbody id="text" style="display: none;">
<tr>
<td class="title">Text Color:</td>
<td class="field"><input type="text" name="color" size="8" maxlength="7" /></td>
</tr>
</tbody>
<tbody id="image" style="display: none;">
<tr>
<td class="title">Image:</td>
<td class="field"><input type="file" name="image" size="10" /></td>
</tr>
<tr>
<td class="title">X Coordinates:</td>
<td class="field"><input type="text" name="x_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Y Coordinates:</td>
<td class="field"><input type="text" name="y_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Text Color:</td>
<td class="field"><input type="text" name="color" size="8" maxlength="7" /></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="title">Display:</td>
<td class="field">
<select name="display">
<option value="visitors">Visitors</option>
<option value="hits">Hits</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html>

preston2003

Thanks for the JScript. It worked well for me

Allan

Quote:

Originally Posted by preston2003

Thanks for the JScript. It worked well for me

Hello,

I'm having the same problem, I'm working with xsl, but it should be +/- the same.
The update and reset doesn't do anything, does it?
I mean, the whole example doesn't do anything but show the dropdown and the buttons, right?

And can you post your example too please?

nausa

This code would also work great for me except if I put it in a form tags

<form></form> in order to send it to an email box to get the field values the code stops working. Is there any way to get this code to work with adding the form tags in or is there another way to send the form to an email without having the form tags.

Thanks,
Amy

mnemonic

what if i want to show/hide a dropdown menu after choosing from the selection and replaces it by another dropdown menu?

For example:

Here's the first dropdown menu:
<select name="signalling">
<option value="fx">FX?</option>
<option value="pri">PRI</option>
</select>

after choosing FX? option, it will disappear and then replaces by another dropdown menu.

Here's the second dropdown menu that should appear:
<select name="fx">
<option value="fx0">FX0</option>
<option value="fxs">FXS</option>
</select>

And ofcourse, it should have a reset button to return to its original state which hides the second dropdown menu and be replaced by the first one.

Hope that you could help me on this.

Thanks a lot!

Show/Hide text and form field based on drop down selection

re: Show/Hide text and form field based on drop down selection

re: Show/Hide text and form field based on drop down selection

re: Show/Hide text and form field based on drop down selection

re: Show/Hide text and form field based on drop down selection

re: Show/Hide text and form field based on drop down selection

re: Show/Hide text and form field based on drop down selection

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/other

/bytes/about