Displaying results based on radio button selection without a browser refresh

jatrix32 · 04-27-2011, 05: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.

Sciliano · 04-27-2011, 05: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.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<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);	

</script>
<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;}

</style>
</head>
	<body>
		<form action="" method="post">
			
		   		<fieldset id="f1">	
				<legend>Questionnaire</legend>			
				    <!-- 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>
				<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>
				<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>
				<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>
				<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>
				<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>	
				<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>	
				<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>	
				<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>							
		  		</fieldset>			

			<input type="submit" name="submit" value="Submit" class="submitBtn">
		</form>
	</body>
</html>

jatrix32 · 04-27-2011, 05: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?

Sciliano · 04-27-2011, 05:53 PM

There is, somewhat.

Change the css for the "fieldset"

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

Code:

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:

jatrix32 · 04-27-2011, 05:59 PM

Thanks, this saved me a great deal of time! Your the best!

Sciliano · 04-27-2011, 06:07 PM

You're welcome. No problem. Good luck with your project.

jatrix32 · 04-27-2011, 07: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.