...

View Full Version : Modify the page (show/hide) form fields according to DropDown Box Selection??



ruso
08-27-2006, 12:32 AM
What I want to do, is that, when the user select one option out of many from the dropdown box some new fields appears.

I was so close to make it , using this example:


<script type="text/javascript">
function showInfo()
{
var elem = document.getElementById('verify');
if(document.forms[0].menu.value == "verify"){
elem.style.display="inline";}
else{
elem.style.display="none";}
}
</script>
</head>

<body>
<form action="#" method="post">
<select name="menu" onchange="showInfo()">
<option value="none">Select an option</option>
<option value="email">Email</option>
<option value="verify">Verify</option>
</select>

<div id="verify" style="display:none;">
<input type="text" value="Username" >
<input type="password" value="password" >
</div>
</form>




But what I do want, is that two differen things appear on the page and in the different location of the page. And this script does not read the second <div>. So the result is, that the only first <div> appears.

Here are some images of what I want to do.
Before:
http://img82.imageshack.us/img82/7093/beforens9.jpg

After
http://img246.imageshack.us/img246/2759/afterzh2.jpg (what has to be changed is on the red circules).

So can someone help me with this script?? Please! I am pritty noob to the javascript.

vwphillips
08-27-2006, 12:12 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">
<!--

function Toggle(obj){
var val=obj.value;
if (!obj.m){ obj.m=''; }
if (!obj.m.match(val)){ obj.m+=','+val+','; }
var hide=obj.m.split(',');
for (var zxc0=0;zxc0<hide.length;zxc0++){
if (document.getElementById(hide[zxc0])){
document.getElementById(hide[zxc0]).style.display='none';
}
}
var show=val.split(',');
for (var zxc1=0;zxc1<show.length;zxc1++){
if (document.getElementById(show[zxc1])){
document.getElementById(show[zxc1]).style.display='';
}
}
}

//-->
</script></head>

<body>
<form >
<select onchange="Toggle(this);" >
<option value="" >Option 0</option>
<option value="TB1,TB2" >Option 1</option>
<option value="TB3" >Option 2</option>
<option value="TB4" >Option 3</option>
</select>
<br>
<input id="TB1" value="TB1" style="display:none;" ><br>
<input id="TB2" value="TB2" style="display:none;" ><br>
<input id="TB3" value="TB3" style="display:none;" ><br>
<input id="TB4" value="TB4" style="display:none;" ><br>
</form>
</body>

</html>

ruso
08-27-2006, 06:32 PM
Thank you a lot vwphillips!!!! :thumbsup:

chachiisme
02-17-2007, 03:45 AM
Awsome code vwphillips you rock!!! I'm going to use it in a form I'm doing...I was wondering how I could make one of the optional fields required???

vwphillips
02-17-2007, 11:54 AM
not realy understanding the question

chachiisme
02-18-2007, 12:30 AM
I would like to add a form submit button and have some validation. So if the user doesn't enter any information on say the TB3 field that they would get a error saying TB3 must be filled out.

vwphillips
02-18-2007, 01:08 AM
<!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">
<!--

function Toggle(obj){
var val=obj.value;
if (!obj.m){ obj.m=''; }
if (!obj.m.match(val)){ obj.m+=','+val+','; }
var hide=obj.m.split(',');
for (var zxc0=0;zxc0<hide.length;zxc0++){
if (document.getElementById(hide[zxc0])){
document.getElementById(hide[zxc0]).style.display='none';
}
}
var show=val.split(',');
for (var zxc1=0;zxc1<show.length;zxc1++){
if (document.getElementById(show[zxc1])){
document.getElementById(show[zxc1]).style.display='';
}
}
}

//-->
</script>

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

function Validate(frm){
var zxcary=['TB1','TB2','TB3','TB4'];
var zxcmess=['Please Complete']
for (var zxc0=0;zxc0<zxcary.length;zxc0++){
var save=frm[zxcary[zxc0]].style.display;
frm[zxcary[zxc0]].style.display='';
if (frm[zxcary[zxc0]].value.length<1){
zxcmess.push(zxcary[zxc0]);
}
frm[zxcary[zxc0]].style.display=save;
}
if (zxcmess.length>1){
alert(zxcmess.join('\n'));
return false;
}
return true;
}


//-->
</script>



</head>

<body>
<form onsubmit="return Validate(this);" action="http://www.vicsjavascripts.org.uk" >
<select onchange="Toggle(this);" >
<option value="" >Option 0</option>
<option value="TB1,TB2" >Option 1</option>
<option value="TB3" >Option 2</option>
<option value="TB4" >Option 3</option>
</select>
<br>
<input id="TB1" value="" style="display:none;" ><br>
<input id="TB2" value="" style="display:none;" ><br>
<input id="TB3" value="" style="display:none;" ><br>
<input id="TB4" value="" style="display:none;" ><br>
<input type="submit" name="" value="Submit">
</form>
</body>

</html>

chachiisme
02-18-2007, 03:17 AM
Yeah that's cool!!

But what what I've been trying to do... is say the user selects option 2 the only field that is visible is TB3 which I want to have validation on. Otherwise if they select option 1 I don't want them to get a error to fill out field TB3 because they can't see it.

I guess what I'm saying is that I only want users to be required to fill in fields that are visible. I hope this makes sense.

Thanks for all your help so far!

vwphillips
02-18-2007, 03:33 AM
<script type="text/javascript">
<!--

function Validate(frm){
var zxcary=['TB1','TB2','TB3','TB4'];
var zxcmess=['Please Complete']
for (var zxc0=0;zxc0<zxcary.length;zxc0++){
var save=frm[zxcary[zxc0]].style.display;
if (frm[zxcary[zxc0]].style.display!='none'){
if (frm[zxcary[zxc0]].value.length<1){
zxcmess.push(zxcary[zxc0]);
}
}
}
if (zxcmess.length>1){
alert(zxcmess.join('\n'));
return false;
}
return true;
}


//-->
</script>

chachiisme
02-18-2007, 03:47 AM
I said it before and I'll say it again... Vic you Rock!!!!

shaX 07
05-11-2011, 04:51 PM
Hey I know this thread is really old, but is it possible (in this example or in a different way) to make form fields appear based on the given selection, but have the new fields utilize the same space? In the example used in this thread, each fields that appear based on a given selection from the drop down, appear below each other, they don't appear in the space directly below the drop down. I would like my fields that show up to just use the next available space, instead of having them all spaced out..

How is this possible?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum