472,102 Members | 1,069 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,102 software developers and data experts.

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
Jul 20 '05 #1
6 148181
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
Aug 10 '05 #2
MrK
1
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>
Feb 16 '06 #3
Thanks for the JScript. It worked well for me
Mar 23 '06 #4
Allan
1
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?
Mar 29 '06 #5
nausa
1
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
Apr 14 '06 #6
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!
Jun 10 '06 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by InvisibleMan | last post: by
2 posts views Thread by Sybre | last post: by
reply views Thread by So Confused | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.