Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Displaying results based on radio button selection without a browser refresh

    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.

  • #2
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    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>

  • #3
    New Coder
    Join Date
    Oct 2010
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    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:

  • Users who have thanked Sciliano for this post:

    jatrix32 (04-27-2011)

  • #5
    New Coder
    Join Date
    Oct 2010
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks, this saved me a great deal of time! Your the best!

  • #6
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    You're welcome. No problem. Good luck with your project.

  • #7
    New Coder
    Join Date
    Oct 2010
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •