radio button drops down options

[h34rt]

Ok, this isn't really related to PHP, probably more Javascript, but you guys are good so here's my idea. I haven't a clue how to do this so maybe you know of a good pre-writen script that can help me out.

I have a survey that asks "I am currently a(n):" and there's 2 radio buttons for "Undergraduate" and "Graduate". What I want to happen is when they select "Undergraduate" to have more radio buttons drop down below it that say "Freshman", "Sophomore", "Junior" and "Senior". if they select "Graduate" nothing happens and they can continue with the survey.

if anyone here has any ideas, that'd be greatly appreciated.

Thanks!

-h34rt

[ClevaTreva]

Hi

Yes, you are right, javascript is needed.

1. Make sure all the radio buttons you want are on the form when the page loads, with the ones yet to show set style="visibility:hidden" and in a div called 'divtounhide'.

2. For the radio buttons you want to get clicked, put an onclick action in the tag: onclick='gradORnot(this,divtounhide)'

In the head of the page, have a javascript like this:

<script>
function gradORnot(val,showme)
{
if (val.checked) {
showme.visibility='visible';
} else {
showme.visibility='hidden';
}
}
</script>

Well, something like that. Can't remember what value a checked radio button has. A check box is either checked or null (I think), so maybe the radio button is too. But, maybe you get the idea

Trevor

[h34rt]

<script>
function gradORnot(val,showme)
{
if (val.checked) {
showme.visibility='visible';
}
else {
showme.visibility='hidden';
}
}
</script>
===========IN BODY I HAVE=============
<input type="radio" name="grad" value="Undergraduate" onclick="gradORnot(this,divtounhide)">Undergraduate<br><br>

<div id="divtounhide">
<input type="radio" name="year" value="Freshman" style="visibility:hidden">Freshman<br>
<input type="radio" name="year" value="Sophomore" style="visibility:hidden">Sophomore<br>
<input type="radio" name="year" value="Junior" style="visibility:hidden">Junior<br>
<input type="radio" name="year" value="Senior" style="visibility:hidden">Senior<br>

</div>

also, how would I hide the text "Freshman, Sophomore, Junior, and Senior" and make it visible along w/ the radio buttons when the undergraduate radio is clicked?

Thanks!

-h34rt

[ClevaTreva]

Hi

It's the div you need to hide, not the radio buttons:

<div id="divtounhide" style="visibility:hidden">
<input type="radio" name="year" value="Freshman">Freshman<br>
<input type="radio" name="year" value="Sophomore">Sophomore<br>
<input type="radio" name="year" value="Junior">Junior<br>
<input type="radio" name="year" value="Senior">Senior<br>
</div>

If this doesn't work, if the html for the whole page isn't too big, post it all here, or post it as an attachment, and I'll fix it and post it back.

Trevor

[h34rt]

Here's the file =]
Thanks a bunch

-h34rt

[ClevaTreva]

Hi

I'll give the answer here rather than by attachment.

The script needs to be:

<script>
function gradORnot(val,valforon,showme)
{
if (val == valforon) {
showme.style.visibility='visible';
}
else {
showme.style.visibility='hidden';
}
}
</script>

The two radio buttons need to be:

  <td><input type="radio" name="grad" value="Undergraduate" onclick='gradORnot(this.value,"Undergraduate",divtounhide)'>
    Undergraduate</td>
  <td><input type="radio" name="grad" value="Graduate" onclick='gradORnot(this.value,"Undergraduate",divtounhide)'>
    Graduate</td>

I used variables rather than hardcoding the names in the script because you can re-use the script this way.

Enjoy.

Trevor

[h34rt]

Awesome Trevor!

Thank you so much!

-h34rt