Help with a hide/reveal script

[The Praetorian]

Okay. I'm using this script to expand and contract items, which I know basically just means it hides them and reveals them. I want to use this script on a form.What I want to do is this.One part of the form has several options which are radio buttons. I want it so that when they click a particular option, the Javascript reveals another sub-option that they can also click. And the form will send the result of both.The form already works fine, what I can't get to work is the reveal when clicking a radio button. It's possible that it's not written into the Javascript, but I can't read JS, so I really don't know.Here's the script : JavaScriptHere's the form on the webpage: ApplicationAnd here's the code for the form. The select:option is what I want to change. Instead of using a dropdown I want to use the radio buttons, and have it so that clicking any of those choices will open the sub-choice and send both when the form is processed. I basically have the form figured out, I just don't understand how to change the Javascript to make it work. Thanks ahead of time for the help.

<?phpif (isset($_REQUEST['Email'])){$CharacterName = $_REQUEST['CharacterName'];$CharacterAge = $_REQUEST['CharacterAge'];$gender = $_REQUEST['gender'];$nation = $_REQUEST['nation'];$guild = $_REQUEST['guild'];$History = $_REQUEST['History'];$Writingsample = $_REQUEST['WritingSample'];$alias = $_REQUEST['alias'];$YourAge = $_REQUEST['YourAge'];$icq = $_REQUEST['icq'];$aim = $_REQUEST['aim'];$msn = $_REQUEST['msn'];$Email = $_REQUEST['Email'];mail( "author@tsrealms.com", "Subject: $Email","~Character Information~\r\n\r\n\r\n~Name~\r\n$CharacterName\r\n\r\n~Age~\r\n$CharacterAge\r\n\r\n~Gender~\r\n$gender\r\n\r\n~Nationality~\r\n$nation\r\n\r\n~Guild~\r\n$guild\r\n\r\n~Brief  History~\r\n$History\r\n\r\n~Writing Sample~\r\n$WritingSample\r\n\r\n\r\n~Personal Information~\r\n\r\n\r\n~Name/Alias~\r\n$alias\r\n\r\n~Age~\r\n$YourAge\r\n\r\n~ICQ~\r\n$icq\r\n\r\n~AIM~\r\n$aim\r\n\r\n~MSN~\r\n$msn", "From: $Email" );echo "<h1>Thank you for your application! One of the admins should be getting back to you via email within 24 hours. If you're accepted, you'll be given the link to register a user name on the message board.</h1>";}else{echo "<form method='post' action='appmail.php' name='app' onsubmit='return ValidateRequiredFields();'><h1>Character Information</h1><br /><center><p>* : Required Fields</p><p><b>Name *</b><br /><input type='text' name='CharacterName' size='20' /><br />Please read the Naming guideline for the country you've chosen for your character. Or if you'd rather have the writing staff come up with an appropriate name for you, just put a ~ here.</p><p><b>Age *</b><br /><input type='text' name='CharacterAge' size='2' /></p><p><b>Male:</b><input type='radio' name='gender' value='Male' /><br /><b>Female:</b><input type='radio' name='gender' value='Female' /></p><p><b>Nationality *</b><br /><select name='nation'><option value=''></option><option value='Siyk'>Siyk</option><option value='Shani'>Shani</option><option value='Ihthian'>Ihthian</option><option value='Ushii'>Ushii</option><option value='Tiianii-iken'>Tiianii - Iken</option><option value='Tiianii-kiil'>Tiianii - Kiil</option></select></p><p><b>Shapers</b> <input type='checkbox' name='guild' value='Yes' /><br />Check this box if you would like your character to be a Shaper. (<b>Required reading: </b><a href='laws.shtml' target='_blank'>The Laws of the Deep</a>, <a href='pathfinders.shtml' target='_blank'>The Pathfinders</a>.)</p><p><b>Brief History *</b><br /><textarea name='History' rows='15' cols='52'></textarea></p><p><b>Writing Sample *</b><br /><textarea name='WritingSample' rows='15' cols='52'></textarea></p><br /><h1>Personal Information</h1><p><b>Email *</b><br /><input name='Email' type='text' size='20' /><br />Needless to say, please make sure your email is correct, otherwise you could be waiting a long time to hear back from us.</p><p><b>Name/Alias</b><br /><input name='alias' type='text' size='20' /><br />This isn't a required field. If you want to put your first name here you can, or you can put a nickname you'd like people to use. It's entirely up to you.</p><p><b>Age *</b><br /><input name='YourAge' type='text' size='2' /><br />Please be honest. None of this information will be given out to anyone.</p><p><b>ICQ</b><br /><input type='text' name='icq' size='20' /></p><p><b>AIM</b><br /><input type='text' name='aim' size='20' /></p><p><b>MSN</b><br /><input type='text' name='msn' size='20' /></p><h1><input type='submit' value='Apply' class='button' /></h1></center></form>";}?>

[The Praetorian]

bump

[jesh]

You might try something like this:

<html><head><script type="text/javascript">var maleSubForm;var femaleSubForm;function showSub(obj){    if(!maleSubForm) maleSubForm = document.getElementById("MaleSubForm");    if(!femaleSubForm) femaleSubForm = document.getElementById("FemaleSubForm");    if(obj.value == "Male")    {        maleSubForm.style.display = "block";        femaleSubForm.style.display = "none";    }    else    {        maleSubForm.style.display = "none";        femaleSubForm.style.display = "block";    }}</script><style type="text/css">#MaleSubForm, #FemaleSubForm { display: none; }</style></head><body><input type="radio" name="gender" value="Male" onclick="showSub(this);" /><br /><input type="radio" name="gender" value="Female" onclick="showSub(this);" /><br /><div id="MaleSubForm">Male Sub-Form<input type="text" name="maletest" value="" /></div><div id="FemaleSubForm">Female Sub-Form<input type="text" name="femaletest" value="" /></div></body></html>

The only problem, I believe, would be that both the "maletest" and "femaletest" inputs would be submitted to the server. It would then be up to your form processing code to determine which set of inputs to use based on the value of "gender".

[The Praetorian]

That's not quite what I wanted, but it might be enough. I'll fiddle with it. The one I actually wanted to change was the part where it says the races.Ignore the <select for the moment. I'm going to change that to a list of radio buttons. What I want is for the script to hide two or three other sets of radio buttons, that would appear if one of the corresponding radio buttons from the previous set was clicked.So...race1 (radio) [if clicked, another set of radio buttons will appear] > sub-race 1 (radio)race2 (radio) > sub-race 2 (radio) [will stay hidden unless the race2 radio button is clicked.]And the form would send the values of both race1 and sub-race1. Does that make more sense? I may just need a whole new script for this, since I realize the script I posted is pretty bulky. If someone could just give me an idea of what I'd need to do.. or if the one Jesh posted will work for what I want to do... I'd appreciate it.

[jesh]

If your HTML was like this:

<input type="radio" name="race" value="race1" onclick="showSubRace(this);" /><br /><input type="radio" name="race" value="race2" onclick="showSubRace(this);" /><br /><input type="radio" name="race" value="race3" onclick="showSubRace(this);" /><br /><div id="race1SubRace" style="display: none;"><input type="radio" name="subrace" value="race1sub1" /><br /><input type="radio" name="subrace" value="race1sub2" /><br /><input type="radio" name="subrace" value="race1sub3" /><br /><input type="radio" name="subrace" value="race1sub4" /><br /></div><div id="race2SubRace" style="display: none;"><input type="radio" name="subrace" value="race2sub1" /><br /><input type="radio" name="subrace" value="race2sub2" /><br /></div><div id="race3SubRace" style="display: none;"><input type="radio" name="subrace" value="race3sub1" /><br /><input type="radio" name="subrace" value="race3sub2" /><br /><input type="radio" name="subrace" value="race3sub3" /><br /><input type="radio" name="subrace" value="race3sub4" /><br /></div>

Your Javascript could look like this:

var race1SubRace;var race2SubRace;var race3SubRace;function showSubRace(this){    // First, we'll get the objects from the DOM so we can hide/display them    if(!race1SubRace) race1SubRace = document.getElementById("race1SubRace");    if(!race2SubRace) race2SubRace = document.getElementById("race2SubRace");    if(!race3SubRace) race3SubRace = document.getElementById("race3SubRace");    // Next, we'll hide them all.    race1SubRace.style.display = "none";    race2SubRace.style.display = "none";    race3SubRace.style.display = "none";    // Then we'll figure out which one to display.    if(obj.value == "race1")    {        race1SubRace.style.display = "block";    }    else if (obj.value == "race2")    {        race2SubRace.style.display = "block";    }    else    {        race3SubRace.style.display = "block";    }}

All you would need to do is change the values of your race options from "race1", "race2" to whatever you want those values to be. Say you replaced "race1" with "halfMile" ( ), then, wherever you see "race1" in the HTML or Javascript, replace it with "halfMile".I hope this helps!

[The Praetorian]

Hm. Didn't work. It's doing the same thing as when I tried it. The sub-categories are hidden, but clicking any of the radio buttons doesn't make them appear. They stay hidden.It's possible I screwed up somewhere. I copied both blocks of code exactly as you gave them to test them. Did I need to combine the javascript you just gave me with the one from your previous post?

[jesh]

Maybe you could post your code. It is possible that it is something as simple as a typo. Also, what browser are you testing this in?