...

View Full Version : Using visible/hidden radio buttons



mattymeemo
07-13-2010, 08:03 PM
Hi

I'm trying to create a questionnaire style series of radio buttons which are hidden and then a different set of radio buttons displayed depending on the previous answer. eg

Q1 Is it a man? (if select yes then display)
Q2 Is he called John? (if no then display)
Q3 Is he called Gary? and so on...


I've been testing using the code below but wondered if anyone had any ideas on how this could be done easily?

Be grateful for any advice, Matt.



Is it a Man?
<input type="radio" name="agree" value="y" onClick="toggle(this)" /> Yes
<input type="radio" name="agree" value="n" onClick="toggle(this)" /> No

<br />

<p id="continue">
<input type="radio" name="agree" value="y" onClick="toggle(this)" /> Yes
<input type="radio" name="agree" value="n" onClick="toggle(this)" /> No
</p>



<script>
var continue_button = document.getElementById('continue');
continue_button.style.visibility = 'hidden';

function toggle(switchElement) {
if (switchElement.value == 'y')
continue_button.style.visibility = 'visible';
else
continue_button.style.visibility = 'hidden';
}
</script>

Philip M
07-13-2010, 09:01 PM
Is this what you are looking for?


<form name = "myform">
Is it a Man?
<input type="radio" name="agree" value="y" onClick="toggleJ(this)" /> Yes
<input type="radio" name="agree" value="n" onClick="toggleJ(this)" /> No

<br />

<p id="continue1" style="display:none">
Is he called John?
<input type="radio" name="John" value="y" onClick="toggleG(this)" /> Yes
<input type="radio" name="John" value="n" onClick="toggleG(this)" /> No
</p>

<p id="continue2" style="display:none">
Is he called Gary?
<input type="radio" name="Gary" value="y" /> Yes
<input type="radio" name="Gary" value="n" /> No
</p>

</form>

<script type = "text/javascript">

function toggleJ(switchElement) {
if (switchElement.value == 'y') {
document.getElementById("continue1").style.display = "block";
}
else {
document.getElementById("continue1").style.display = "none";
document.getElementById("continue2").style.display = "none";
}
}

function toggleG(switchElement) {
if (switchElement.value == 'n') {
document.getElementById("continue2").style.display = "block";
}
else {
document.getElementById("continue2").style.display = "none";
}
}

</script>

You may not have two radio button groups with the same name.


"A psychiatrist asks a lot of expensive questions that your wife asks for nothing." – Joey Adams

mattymeemo
07-13-2010, 09:13 PM
Perfect!

Thanks for the prompt and super helpful response.

Matt



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum