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 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    32
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Form Completeness Validation

    Hello,

    I am building a online survey for someone and I need some help. I have a php script that pulls 5 questions and the corresponding answer options from a database. Each question is displayed and a <select><option> list is generated for the answer choices, using php.

    The default value of each selection box is 0 with the text "Select One".

    I would like the Next button to be disabled until all 5 questions have been answered.

    Incomplete surveys are not valid for the research project.

    Thanks
    Jlimited

  • #2
    New Coder
    Join Date
    Aug 2006
    Location
    Illinois
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Give this a try - it works in IE but has not been tested in other browsers.

    Code:
    <html>
    <head>
    	<title>Test Page</title>
    	<script language="JavaScript">
    	<!--
    		function validateSelectBox()
    		{			
    			var objForm = document.frmSurvey;
    			
    			with (objForm)
    			{
    				var selectBoxes = document.getElementsByTagName("SELECT");
    				var valid = true;
    				
    				for (var j = 0; j < selectBoxes.length; j++)
    				{
    					if (selectBoxes[j].selectedIndex == 0)
    					{
    						valid = false;
    						break;
    					}
    				}
    				if (valid)
    					document.getElementById("nextButton").disabled = false;
    				else
    					document.getElementById("nextButton").disabled = true;
    			}			
    		}
    	-->
    	</script>
    </head>
    
    <body onLoad="javascript:validateSelectBox();">
    
    <form name="frmSurvey" method="post" action="resultPage.html">
    	<select name="Q1" onChange="javascript:validateSelectBox();">
    		<option value="0">Select One</option>
    		<option value="1">Option 1</option>
    	</select>
    	<select name="Q2" onChange="javascript:validateSelectBox();">
    		<option value="0">Select One</option>
    		<option value="1">Option 1</option>
    	</select>
    	<select name="Q3" onChange="javascript:validateSelectBox();">
    		<option value="0">Select One</option>
    		<option value="1">Option 1</option>
    	</select>
    	<select name="Q4" onChange="javascript:validateSelectBox();">
    		<option value="0">Select One</option>
    		<option value="1">Option 1</option>
    	</select>
    	<select name="Q5" onChange="javascript:validateSelectBox();">
    		<option value="0">Select One</option>
    		<option value="1">Option 1</option>
    	</select>
    	<input type="submit" id="nextButton" value="Next"/>
    </form>
    
    </body>
    </html>
    Sarah

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    32
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Thanks

    Thanks that works great


  •  

    Posting Permissions

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