PDA

Click to See Complete Forum and Search --> : Javascript Forms - If you pick a certain option, more options appear

Paintball24
07-27-2006, 12:22 PM
Alright, I'm working on a form for my website.
I'm trying to use Javascript so that if you pick a certain option, more options appear. (such as more text fields, radio buttons, etc.)

Here's part of the code:
<select name="dropdown">
<option selected>1</option>
<option>2</option>
<option>3</option>
<option>4</option>

</select>

Can someone please help me do this?

I found this thread (http://webdeveloper.com/forum/showthread.php?t=112953&highlight=Javascript+Forms), but what the second post says confuses me: <select name="num_layers" size="1"
onchange="if(this.options[this.selectedIndex].text == '4') getDiv2(); return true;">

I don't get it.
I'm a n00b at Javascript.
Please Help.
vwphillips
07-27-2006, 01:25 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips (27-July-2006)

function Display(obj){
if (!window[obj.name+'match']){ window[obj.name+'match']=''; }
var val=obj.value.split('|');
for (var zxc0=0;zxc0<val.length;zxc0++){
if (!window[obj.name+'match'].match(val[zxc0])){
window[obj.name+'match']+=val[zxc0]+'|';
}
}
var flds=window[obj.name+'match'].split('|');
for (var zxc1=0;zxc1<flds.length;zxc1++){
var els=document.getElementsByName(flds[zxc1]);
for (var zxc1a=0;zxc1a<els.length;zxc1a++){
els[zxc1a].style.display='none';
}
}
for (var zxc2=0;zxc2<val.length;zxc2++){
els=document.getElementsByName(val[zxc2]);
for (var zxc2a=0;zxc2a<els.length;zxc2a++){
els[zxc2a].style.display='';
}
}
}


//-->
</script>

</head>

<body>
<form >
<select name="fred" onchange="Display(this);">
<option value="joe" >Select</option>
<option value="tom" >Select</option>
<option value="harry|joe" >Select</option>
<option value="harry|cb" >Select</option>
</select>
<input name="tom" value="tom" style="display:none;" ><br>
<input name="dick" value="dick" style="display:none;" ><br>
<input name="harry" value="harry" style="display:none;" ><br>
<input name="joe" value="joe" style="display:none;" ><br>
<input type="radio" name="cb" style="display:none;" ><br>
<input type="radio" name="cb" style="display:none;" ><br>

</form>

</body>

</html>
Paintball24
07-27-2006, 01:38 PM
Great. Thanks. This is a start, but can you explain this a little?
vwphillips
07-27-2006, 01:55 PM
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips (27-July-2006)

function Display(obj){
// construct a string variable unique to the select
if (!window[obj.name+'match']){ window[obj.name+'match']=''; }
// split the value of the selected option
var val=obj.value.split('|');
// if the slit field does not ha a match in string variable unique to the select add it to the string
for (var zxc0=0;zxc0<val.length;zxc0++){
if (!window[obj.name+'match'].match(val[zxc0])){
window[obj.name+'match']+=val[zxc0]+'|';
}
}
// hide all elements with name in string variable unique to the select
var flds=window[obj.name+'match'].split('|');
for (var zxc1=0;zxc1<flds.length;zxc1++){
var els=document.getElementsByName(flds[zxc1]); // this takes care or radios and check boxes etc
for (var zxc1a=0;zxc1a<els.length;zxc1a++){
els[zxc1a].style.display='none';
}
}
// show those elements in the val split
for (var zxc2=0;zxc2<val.length;zxc2++){
els=document.getElementsByName(val[zxc2]);
for (var zxc2a=0;zxc2a<els.length;zxc2a++){
els[zxc2a].style.display='';
}
}
}


//-->
</script>
Paintball24
07-27-2006, 04:54 PM
Yea, dude...I said am a n00b.
I greatly appreciate you helping me, but it doesn't help me if I don't understand this or know how to use this code.

Can you please shed a little more light?
Paintball24
07-27-2006, 05:05 PM
I've been messing around with this and it's not working right.
When I insert text in front of the input boxes it screws up the rest of the form. Is there another way to insert text in front of the input boxes?

<input name="tom" value="tom" style="display:none;" ><br>
<input name="dick" value="dick" style="display:none;" ><br>
<input name="harry" value="harry" style="display:none;" ><br>
Name: <input name="joe" value="joe" style="display:none;" ><br>
<input type="radio" name="cb" style="display:none;" ><br>
<input type="radio" name="cb" style="display:none;" ><br>
vwphillips
07-28-2006, 05:46 AM
if you need to include other elements then nest in a parent element

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips (28-July-2006)

function Display(obj){
if (!window[obj.name+'match']){ window[obj.name+'match']=''; }
var val=obj.value.split('|');
for (var zxc0=0;zxc0<val.length;zxc0++){
if (!window[obj.name+'match'].match(val[zxc0])){
window[obj.name+'match']+=val[zxc0]+'|';
}
}
var flds=window[obj.name+'match'].split('|');
for (var zxc1=0;zxc1<flds.length;zxc1++){
var els=document.getElementsByName(flds[zxc1]);
for (var zxc1a=0;zxc1a<els.length;zxc1a++){
els[zxc1a].parentNode.style.display='none';
}
}
for (var zxc2=0;zxc2<val.length;zxc2++){
els=document.getElementsByName(val[zxc2]);
for (var zxc2a=0;zxc2a<els.length;zxc2a++){
els[zxc2a].parentNode.style.display='';
}
}
}


//-->
</script>

</head>

<body>
<form >
<select name="fred" onchange="Display(this);">
<option value="joe" >Select</option>
<option value="tom" >Select</option>
<option value="harry|joe" >Select</option>
<option value="harry|cb" >Select</option>
</select>
<a style="display:none;" >Name 1 <input name="tom" value="tom" ></a><br>
<a style="display:none;" >Name 2 <input name="dick" value="dick" ></a><br>
<a style="display:none;" >Name 3 <input name="harry" value="harry" ></a><br>
<a style="display:none;" >Name 4 <input name="joe" value="joe" ></a><br>
<a style="display:none;" >Name 5 <input type="radio" name="cb" ><br>
<input type="radio" name="cb" ><br>
</a>
</form>

</body>

</html>