Forum Moderators: open

Message Too Old, No Replies

Using OnChange() to create additional text field

         

turtle1353

9:59 pm on Oct 7, 2005 (gmt 0)

10+ Year Member



Help from the JavaScript Gurus please with this function.

If the user selects option "1" a new text field gets displayed, if they select 2 or 3, nothing happens.

<select id="this" name="this" onchange="somefunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

This gets display somewhere on the page when option 1 is selected.
<tr>
<td><input type="text"...></td>
</tr>

Thanks!

Rambo Tribble

2:12 am on Oct 8, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I guess the main question is, "If the user goes back and selects another choice, should the new box disappear?"

By the way, "this" is a reserved word with very special meaning. Don't be namin' or idin' with it.

turtle1353

2:57 am on Oct 9, 2005 (gmt 0)

10+ Year Member



hmmm...I guess the text field should disappear. But if it can't then that's okay too.

lol thanks for the tip on naming things "this".

Rambo Tribble

3:33 pm on Oct 9, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



There are at least a couple approaches to this problem. Here's an example that preserves the use of the onchange event you specified. Note that the "select an option" option is necessary, otherwise no change would be registered if the user selected option "1". Other approaches would involve event handlers on the idividual options.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form action="#">
<p>
<select id="selOne" onchange="targ=document.getElementById('inOne');this.value=='1'? targ.style.visibility='visible' : targ.style.visibility='hidden';">
<option>select an option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</p>
<p>
<input id="inOne" type="text" value="whatever" style="visibility:hidden;" />
</p>
</form>
</body>
</html>

Note: If desired, display:none;/display:inline; could be substituted for visibility:hidden;/visibility:visible;, with the obvious consequent connotations.

turtle1353

5:02 pm on Oct 10, 2005 (gmt 0)

10+ Year Member



Rambo,

That example you gave works great! Thanks a lot for your help!