View Full Version : Displaying results based on radio button selection without a browser refresh

04-27-2011, 06:09 PM
I am very inexperienced with javasciprt. I am designing a form in coldfusion, and want some dynamic action to take place.

My users will be offered 2 selections via radio buttons. Depending on which radio button they select, they will get a few more radio buttons to choose from. I have been told that this can be handled in javascript.

So I am appealing to the javascript programmer nation for some assistance in this endeavor.

Any help would be greatly appreciated, Thanks.

04-27-2011, 06:19 PM
Take a look at this. Copy the entire post and save it as an .html document. Then open that document in your browser.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var IE = navigator.appName == "Microsoft Internet Explorer";
var nSets = "";
var answeredQ = [];

function advanceTo(nextQ,nQ){

var currAns = answeredQ[nQ.name.replace(/q/,"")-1];
if (currAns != "-" && currAns != nQ.value)
var nFloor = nQ.parentNode.parentNode.id.replace(/f/,"")-1;
for (i=0; i<nSets.length; i++)
if (i > nFloor)
nSets[i].style.display = "none";
nSets[nextQ-1].style.display = "";
answeredQ[nQ.name.replace(/q/,"")-1] = nQ.value;

function init(){

nSets = document.forms[0].getElementsByTagName('fieldset');
for (i=1; i<nSets.length; i++)
nSets[i].style.display = "none";
answeredQ[answeredQ.length] = "-";
IE ? nRule = document.styleSheets[0].rules : nRule = document.styleSheets[0].cssRules;
for (i=0; i<nRule.length; i++)
if (nRule[i].selectorText.toLowerCase() == "form")
nRule[i].style.display = "";

IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);

<style type="text/css">

body {background-color: #eae3c6; margin-top: 60px;}

/* keep the form hidden, so that it won't display unless JavaScript is enabled */
form {display: none; width: 620px; margin: auto; font-family: 'times new roman'; font-size: 12pt;}

fieldset {width: 620px; padding-top: 5px; padding-bottom: 5px; padding-left: 10px;
background-color: #f0fff0; border: 1px solid #87ceeb;}
legend {font-family: georgia; font-size: 14pt; color: #00008b; background-color: #87ceeb;
margin-top: -5px; padding-left: 3px; padding-right: 3px; margin-bottom: 5px;}
.submitBtn {background-color: #ffffff; border: 1px solid #000000; font-family: arial;
font-size: 10pt; font-weight: bold; cursor: pointer; display: block; margin-left: auto;
margin-right: auto; margin-top: 5px; margin-bottom: 5px;}

<form action="" method="post">

<fieldset id="f1">
<!-- Question 1 "yes" progresses to question 2, "no" progresses to question 4 -->
<label>Question One</label>
<label><input type="radio" name="q1" value="y" onclick="advanceTo(2,this)">Yes</label>
<label><input type="radio" name="q1" value="n" onclick="advanceTo(4,this)">No</label>
<fieldset id="f2">
<!-- Question 2 "yes" progresses to question 3, "no" progresses to question 5 -->
<label>Question Two</label>
<label><input type="radio" name="q2" value="y" onclick="advanceTo(3,this)">Yes</label>
<label><input type="radio" name="q2" value="n" onclick="advanceTo(5,this)">No</label>
<fieldset id="f3">
<!-- Question 3 "yes" progresses to question 6, "no" progresses to question 7 -->
<label>Question Three</label>
<label><input type="radio" name="q3" value="y" onclick="advanceTo(6,this)">Yes</label>
<label><input type="radio" name="q3" value="n" onclick="advanceTo(7,this)">No</label>
<fieldset id="f4">
<!-- Question 4 "yes" progresses to question 8, "no" progresses to question 9 -->
<label>Question Four</label>
<label><input type="radio" name="q4" value="y" onclick="advanceTo(8,this)">Yes</label>
<label><input type="radio" name="q4" value="n" onclick="advanceTo(9,this)">No</label>
<fieldset id="f5">
<label>Question Five</label>
<label><input type="radio" name="q5" value="y">Yes</label>
<label><input type="radio" name="q5" value="n">No</label>
<fieldset id="f6">
<label>Question Six</label>
<label><input type="radio" name="q6" value="y">Yes</label>
<label><input type="radio" name="q6" value="n">No</label>
<fieldset id="f7">
<label>Question Seven</label>
<label><input type="radio" name="q7" value="y">Yes</label>
<label><input type="radio" name="q7" value="n">No</label>
<fieldset id="f8">
<label>Question Eight</label>
<label><input type="radio" name="q8" value="y">Yes</label>
<label><input type="radio" name="q8" value="n">No</label>
<fieldset id="f9">
<label>Question Nine</label>
<label><input type="radio" name="q9" value="y">Yes</label>
<label><input type="radio" name="q9" value="n">No</label>

<input type="submit" name="submit" value="Submit" class="submitBtn">

04-27-2011, 06:35 PM
This is awesome! Is there a way to set it up so that the next option appears to the right of the buttons instead of underneath?

04-27-2011, 06:53 PM
There is, somewhat.

Change the css for the "fieldset"

For example, change the width of the fieldset to 220px. Like this:

fieldset {width: 220px; padding-top: 5px; padding-bottom: 5px; padding-left: 10px;
background-color: #f0fff0; border: 1px solid #87ceeb;}
Now the second fieldset will display to the right of the first one, because the form css is 620px wide.

Also experiment with the fieldset padding, border, etc:

04-27-2011, 06:59 PM
Thanks, this saved me a great deal of time! Your the best!

04-27-2011, 07:07 PM
You're welcome. No problem. Good luck with your project.

04-27-2011, 08:12 PM
Your going to kill me. Just got out of a meeting and there where 2 requests.

1 - the code works perfect, but can it work with multiple users? For example, if a manager is online filling out this form, and the code above worked for emp 1, if I copied and pasted it for emp 2, would it work or is there an adjustment needed in the javascript?

2 - Can drop down boxes be used instead of radio buttons. I hate when they change their minds.

Again, sorry for the change.