...

View Full Version : Hide and show form fields



YaymeQ
02-28-2008, 03:38 AM
Supposing I had a form that went something like this:

Is your hair green?
How long has it been green?
Do you like it green?

Is it daytime right now?
ect. ect.

Could I hide how long has it been green and do you like it green if they put no and show it if they put yes?
Would I do that with CSS? or would it have to be javascript? I don't know anything about javascript.

Thanks guys.

jcdevelopment
02-28-2008, 03:55 AM
yeah, thats all javascript!!

It has to do with disableing and ableing a form field!

heres a good site for you

http://www.codetoad.com/javascript/enable_disable_form_element.asp

rangana
02-28-2008, 05:07 AM
...or maybe something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function()
{
document.getElementById('select1').style.display='none';
document.getElementById('select2').style.display='none';
}
function show()
{
document.getElementById('select1').style.display = '';
}
function hide()
{
document.getElementById('select1').style.display = 'none';
}
function show2()
{
document.getElementById('select2').style.display = '';
}
function hide2()
{
document.getElementById('select2').style.display = 'none';
}
</script>
<style type="text/css">
body,html{spacing:0;padding:0;font-family:tahoma;font-size:10pt;}
#wrap{width:500px;margin:5px auto;background:#efefff;border:1px solid #222;padding:10px;text-align:center; height:295px;}
#select1,#select2{width:200px;border:1px solid #000; padding:2px;background:#cfcfcf;margin:5px;}
</style>
</head>
<body>
<div id="wrap">
Is your hair green?
<div style="height:120px;">
<input type="radio" name="answer" onClick="show()">YES
<input type="radio" name="answer" onClick="hide()">NO
</br>
<div id="select1">
How long has it been green?
<input type="text" name="button1">
<br/><br/>
Do you like it green?
<select>
<option>Yes</option>
<option>No</option>
</select>
</div>
</div>
<hr/>
<br/>
Is it Daytime right now?
<div style="height:120px;">
<input type="radio" name="answer2" onClick="show2()">YES
<input type="radio" name="answer2" onClick="hide2()">NO
</br>
<div id="select2">
How long has it been daytime?
<input type="text" name="button1">
<br/><br/>
Do you like it daytime?
<select>
<option>Yes</option>
<option>No</option>
</select>
</div>
</div>
</div>
</body>
</html>

See if it helps :D

YaymeQ
02-28-2008, 05:13 AM
okay, but that enables it no matter what they choose. In the example above, suppose they say the hair isn't green. It wouldn't make sense to enable "How long has it been green" if it's not even green. I think I need something a little more complex ... and I even have questions with that one ... oy.

Edit: Hey rangana you posted that while I was typing, that looks complex give me a moment to look it over. :)

YaymeQ
02-28-2008, 05:29 AM
That will definitely work! ... but I have 50+ fields in my form ... need coffee ...

rangana
02-28-2008, 06:14 AM
You haven't told me that it will be as large as 50 items, anyway, there's the edition....this will give you no pain:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function()
{
var index;
for(index=1;index<=50;index++)
document.getElementById('select'+index).style.display='none';
}
function show(thisElement)
{
document.getElementById('select'+thisElement).style.display='';
}
function hide(thisElement)
{
document.getElementById('select'+thisElement).style.display='none';
}
</script>
<style type="text/css">
body,html{spacing:0;padding:0;font-family:tahoma;font-size:10pt;}
#wrap{width:500px;margin:5px auto;background:#efefff;border:1px solid #222;padding:10px;text-align:center; height:100&#37;;}
#select1,#select2{width:200px;border:1px solid #000; padding:2px;background:#cfcfcf;margin:5px;}
</style>
</head>
<body>
<div id="wrap">
Is your hair green?
<div style="height:120px;">
<input type="radio" name="answer1" onClick="show(1)">YES
<input type="radio" name="answer1" onClick="hide(1)">NO
</br>
<div id="select1">
How long has it been green?
<input type="text" name="button1">
<br/><br/>
Do you like it green?
<select>
<option>Yes</option>
<option>No</option>
</select>
</div>
</div>
<hr/>
<br/>
Is it Daytime right now?
<div style="height:120px;">
<input type="radio" name="answer2" onClick="show(2)">YES
<input type="radio" name="answer2" onClick="hide(2)">NO
</br>
<div id="select2">
How long has it been daytime?
<input type="text" name="button1">
<br/><br/>
Do you like it daytime?
<select>
<option>Yes</option>
<option>No</option>
</select>
</div>
</div>
</div>
</body>
</html>

See if it helps :D

YaymeQ
02-28-2008, 06:32 AM
Ooooh!! thank you thank you thank you!!!! (I'm glad I planned to do it tomorrow!) I knew there had to be a more automated way of doing it ... *Happy dance*

rangana
02-28-2008, 06:35 AM
No problem!..You're completely welcome :D

YaymeQ
02-29-2008, 05:14 AM
I'm sorry to be back on this topic again, but do I have to modify the javascript at all or just plug in my div id="select1" 2 3 ect in the html? and is it possible to have a table inside a div inside a table? I was using a table to align all the fields and labels, I think I heard somewhere that css should be used for that though ... but I didn't make the form and I really don't want to redo the whole thing (Mostly because I'm not quite sure what method to use) I'm testing it locally before I put it online (I know you people like to ask for links) so I can't give you a link to it. Sorry.

rangana
02-29-2008, 05:31 AM
I'm sorry to be back on this topic again, but do I have to modify the javascript at all or just plug in my div id="select1" 2 3 ect in the html? and is it possible to have a table inside a div inside a table? I was using a table to align all the fields and labels, I think I heard somewhere that css should be used for that though ... but I didn't make the form and I really don't want to redo the whole thing (Mostly because I'm not quite sure what method to use) I'm testing it locally before I put it online (I know you people like to ask for links) so I can't give you a link to it. Sorry.

One question at a time please. Anyway,
1. You don't need to modify the javascript. Just have the div names to select1,2,3,......50. You could modify your javascript, but this will be another work load.
Just remember to have a different divs for different forms.
Don't worry, the codes i've given you is capable of showing/hiding upto 50 forms :)

2. Yes, it is possible to have a table inside a div.

...and if nothing work, you could..at all times, zip your files.

See if it helps :D

YaymeQ
02-29-2008, 05:46 AM
I thought so ... I got it to work, but now the div shows up in a different div ... been trying to figure that one out all day. I'm figuring it's gotta be a typo though, last time I had this problem I had ended a table tag like this: </table? Totally threw off the whole thing. lol I might be back.

rangana
02-29-2008, 06:00 AM
It's really difficult to point on which part of the <div> has the error. Unluckily, it is not online,.

Just tell us how you've gone so far,,,and how many hair is left in your head :D

YaymeQ
02-29-2008, 06:13 AM
It works! lol I was missing an opening <td> tag. Ah ha ha. Thanks to you, the form is now perfect!

rangana
02-29-2008, 06:17 AM
No problem!..You're completely welcome.
Glad to know to find the fix yourself...and funny to realize that it was the <td> that cause the mess.

Good Luck to the site :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum