...

View Full Version : Simple javascript help needed



myfayt
12-05-2010, 01:30 AM
I have a page with options, and I need to hide options unless a certain choice is selected.

So say you have a select box for male and female, if they select male, I need it to show male options, and if they select female, it shows female options.

How can I hide things until selected and then show the textboxes and stuff?

Thank you! :thumbsup:

DJCMBear
12-05-2010, 01:50 AM
Try searching on Google for "javascript show and hide" as there is loads of codes out there which do this.

myfayt
12-05-2010, 02:13 AM
Thanks, I didn't know the name to look for.

myfayt
12-05-2010, 02:28 AM
I just looked at at least a dozen websites about it, and none were helpful. Like click a text link to hide or show, or hide all check boxes, but couldn't find the one I need.

jmrker
12-05-2010, 03:01 AM
Can you modify this to your needs? ...

Edited link: http://javascript.internet.com/forms/multi-value-drop-down-list.html

If not, describe problem further please. :)

myfayt
12-05-2010, 04:34 AM
That is an image map. So wouldn't work.

What I am talking about is a select box with options, lets say nothing else is displayed on the page.

You click it and choose an option, and then it shows a bunch of options after clicking an option on the select box.

So like

SELECT
MALE
FEMALE

//Hidden (value male) shown if selected male
Sex: Male
Name: <input type="text" name="malename">
<input type="submit" name="submit" value="Submit Info">

//Hidden (value female) shown if selected female
Sex: Female
Name: <input type="text" name="femalename">
<input type="submit" name="submit" value="Submit Info">

jmrker
12-05-2010, 05:00 AM
Sorry ... posted incorrect link. (Working on too many projects at the same time :( )

See corrected link in post #5 above. :D

Quick example of usage below...


<html>
<head>
<title>Male / Female Information</title>
<script type="text/javascript">
// From: http://www.codingforums.com/showthread.php?p=1023768#post1023768

function ShowReg(op) {
document.getElementById('Male').style.display='none';
document.getElementById('Female').style.display='none';
switch (op) {
case 1 : document.getElementById('Male').style.display="block"; break;
case 2 : document.getElementById('Female').style.display="block"; break;
default : break;
}
}
</script>
</head>

<body>
<select id="choice" onChange="ShowReg(this.selectedIndex)">
<option value='0'>Choose</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<p>
<div id="Male" style="display:none">
Male: <input type="text" id="maleInfo" value="">
</div>
<div id="Female" style="display:none">
Female: <input type="text" id="femaleInfo" value="">
</div>
</body>
</html>

myfayt
12-05-2010, 05:21 PM
Seems to be working so far, thank you!

jmrker
12-05-2010, 07:03 PM
Seems to be working so far, thank you!

What do you expect to go wrong?????

Anyway, you're most welcome.
Happy to help.
Good Luck!
:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum