0

I’ve created this multi page form. I am having a problem with it starting the next page in the middle or bottom of the next page. I am afraid people won’t realize there are questions above and will fail to fill out the form completely. Is there a way to ensure each page starts at the top? Below is the code from the first page and top of the second page (so about the length of it).

<html>
	<head>
		<title>NPW Registration Form</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"><link href="style.css" rel="stylesheet" type="text/css">
		<!-- calendar stuff -->
		      <link rel="stylesheet" type="text/css" href="calendar/calendar-blue2.css" />
		      <script type="text/javascript" src="calendar/calendar.js"></script>
		      <script type="text/javascript" src="calendar/calendar-en.js"></script>
		      <script type="text/javascript" src="calendar/calendar-setup.js"></script>
		<!-- END calendar stuff -->

	    <!-- expand/collapse function -->
	    <SCRIPT type=text/javascript>
		<!--
		function collapseElem(obj)
		{
			var el = document.getElementById(obj);
			el.style.display = 'none';
		}


		function expandElem(obj)
		{
			var el = document.getElementById(obj);
			el.style.display = '';
		}


		//-->
		</SCRIPT>
		<!-- expand/collapse function -->


		<!-- expand/collapse function -->
		    <SCRIPT type=text/javascript>
			<!--

			// collapse all elements, except the first one
			function collapseAll()
			{
				var numFormPages = 7;

				for(i=2; i <= numFormPages; i++)
				{
					currPageId = ('mainForm_' + i);
					collapseElem(currPageId);
				}
			}


			//-->
			</SCRIPT>
		<!-- expand/collapse function -->


		 <!-- validate -->
		<SCRIPT type=text/javascript>
		<!--
			function validateField(fieldId, fieldBoxId, fieldType, required)
			{
				fieldBox = document.getElementById(fieldBoxId);
				fieldObj = document.getElementById(fieldId);

				if(fieldType == 'text'  ||  fieldType == 'textarea'  ||  fieldType == 'password'  ||  fieldType == 'file'  ||  fieldType == 'phone'  || fieldType == 'website')
				{	
					if(required == 1 && fieldObj.value == '')
					{
						fieldObj.setAttribute("class","mainFormError");
						fieldObj.setAttribute("className","mainFormError");
						fieldObj.focus();
						return false;					
					}

				}


				else if(fieldType == 'menu'  || fieldType == 'country'  || fieldType == 'state')
				{	
					if(required == 1 && fieldObj.selectedIndex == 0)
					{				
						fieldObj.setAttribute("class","mainFormError");
						fieldObj.setAttribute("className","mainFormError");
						fieldObj.focus();
						return false;					
					}

				}


				else if(fieldType == 'email')
				{	
					if((required == 1 && fieldObj.value=='')  ||  (fieldObj.value!=''  && !validate_email(fieldObj.value)))
					{				
						fieldObj.setAttribute("class","mainFormError");
						fieldObj.setAttribute("className","mainFormError");
						fieldObj.focus();
						return false;					
					}

				}



			}

			function validate_email(emailStr)
			{		
				apos=emailStr.indexOf("@");
				dotpos=emailStr.lastIndexOf(".");

				if (apos<1||dotpos-apos<2) 
				{
					return false;
				}
				else
				{
					return true;
				}
			}


			function validateDate(fieldId, fieldBoxId, fieldType, required,  minDateStr, maxDateStr)
			{
				retValue = true;

				fieldBox = document.getElementById(fieldBoxId);
				fieldObj = document.getElementById(fieldId);	
				dateStr = fieldObj.value;


				if(required == 0  && dateStr == '')
				{
					return true;
				}


				if(dateStr.charAt(2) != '/'  || dateStr.charAt(5) != '/' || dateStr.length != 10)
				{
					retValue = false;
				}	

				else	// format's okay; check max, min
				{
					currDays = parseInt(dateStr.substr(0,2),10) + parseInt(dateStr.substr(3,2),10)*30  + parseInt(dateStr.substr(6,4),10)*365;
					//alert(currDays);

					if(maxDateStr != '')
					{
						maxDays = parseInt(maxDateStr.substr(0,2),10) + parseInt(maxDateStr.substr(3,2),10)*30  + parseInt(maxDateStr.substr(6,4),10)*365;
						//alert(maxDays);
						if(currDays > maxDays)
							retValue = false;
					}

					if(minDateStr != '')
					{
						minDays = parseInt(minDateStr.substr(0,2),10) + parseInt(minDateStr.substr(3,2),10)*30  + parseInt(minDateStr.substr(6,4),10)*365;
						//alert(minDays);
						if(currDays < minDays)
							retValue = false;
					}
				}

				if(retValue == false)
				{
					fieldObj.setAttribute("class","mainFormError");
					fieldObj.setAttribute("className","mainFormError");
					fieldObj.focus();
					return false;
				}
			}
		//-->
		</SCRIPT>
		<!-- end validate -->
	</head>

	<body onLoad="collapseAll()">

	<div id="mainForm">




		<div id="formHeader">
				<h2 class="formInfo">NATIONAL POLICE WEEK REGISTRATION FORM</h2>
				<p class="formInfo"></p>
		</div>


		<BR/><!-- begin form -->
		<form method=post enctype=multipart/form-data action=processor.php onSubmit="return validatePage7();"><ul class=mainForm id="mainForm_1">

				
                
                <li class="mainForm" id="fieldBox_1"></li>

		  <li class="formHeader">
		    <h3 align="center">Registration Form</h3>
		  </li>
				<li class="mainForm"></li>
				<li class="mainForm"><strong>IMPORTANT INFORMATION:</strong> &nbsp;Each Household, which includes family members with the same mailing address, arriving and departing at the same time, on the same date, must complete a registration form. &nbsp;DO NOT combine households on a single registration. &nbsp;Combining households on a single registration DOES NOT guarantee everyone will be booked at the same hotel. &nbsp;Make sure to start at the top of each page and fill out  everything completely.</li>
		  <li class="mainForm"></li>
				<li class="mainForm">
				  <label class="formFieldQuestion">Title</label>
				  <select class=mainForm name=field_1 id=field_1>
				    <option value=''></option><option value="Mr.">Mr.</option><option value="Mrs.">Mrs.</option><option value="Ms.">Ms.</option>
				    </select>
		        </li>
				<li class="mainForm" id="fieldBox_2">
					<label class="formFieldQuestion">First Name&nbsp;*</label><input class=mainForm type=text name=field_2 id=field_2 size='50' value=''></li>

				<li class="mainForm" id="fieldBox_3">
					<label class="formFieldQuestion">Last Name&nbsp;*</label><input class=mainForm type=text name=field_3 id=field_3 size='50' value=''></li>

				<li class="mainForm" id="fieldBox_4">
					<label class="formFieldQuestion">Address</label><input class=mainForm type=text name=field_4 id=field_4 size='50' value=''></li>

				<li class="mainForm" id="fieldBox_5">
					<label class="formFieldQuestion">City</label><input class=mainForm type=text name=field_5 id=field_5 size='20' value=''></li>

				<li class="mainForm" id="fieldBox_6">
					<label class="formFieldQuestion">State</label><select class=mainForm name=field_6 id=field_6><option value=''> </option><option value="Alabama">Alabama</option><option value="Alaska">Alaska</option><option value="Arizona">Arizona</option><option value="Arkansas">Arkansas</option><option value="California">California</option><option value="Colorado">Colorado</option><option value="Connecticut">Connecticut</option><option value="Delaware">Delaware</option><option value="Florida">Florida</option><option value="Georgia">Georgia</option><option value="Hawaii">Hawaii</option><option value="Idaho">Idaho</option><option value="Illinois">Illinois</option><option value="Indiana">Indiana</option><option value="Iowa">Iowa</option><option value="Kansas">Kansas</option><option value="Kentucky">Kentucky</option><option value="Louisiana">Louisiana</option><option value="Maine">Maine</option><option value="Maryland">Maryland</option><option value="Massachusetts">Massachusetts</option><option value="Michigan">Michigan</option><option value="Minnesota">Minnesota</option><option value="Mississippi">Mississippi</option><option value="Missouri">Missouri</option><option value="Montana">Montana</option><option value="Nebraska">Nebraska</option><option value="Nevada">Nevada</option><option value="New Hampshire">New Hampshire</option><option value="New Jersey">New Jersey</option><option value="New Mexico">New Mexico</option><option value="New York">New York</option><option value="North Carolina">North Carolina</option><option value="North Dakota">North Dakota</option><option value="Ohio">Ohio</option><option value="Oklahoma">Oklahoma</option><option value="Oregon">Oregon</option><option value="Pennsylvania">Pennsylvania</option><option value="Rhode Island">Rhode Island</option><option value="South Carolina">South Carolina</option><option value="South Dakota">South Dakota</option><option value="Tennessee">Tennessee</option><option value="Texas">Texas</option><option value="Utah">Utah</option><option value="Vermont">Vermont</option><option value="Virginia">Virginia</option><option value="Washington">Washington</option><option value="West Virginia">West Virginia</option><option value="Wisconsin">Wisconsin</option><option value="Wyoming">Wyoming</option></SELECT></li>

				<li class="mainForm" id="fieldBox_7">
					<label class="formFieldQuestion">Zip</label><input class=mainForm type=text name=field_7 id=field_7 size='20' value=''></li>

				<li class="mainForm" id="fieldBox_8">
					<label class="formFieldQuestion">Email Address&nbsp;*</label><input class=mainForm type=email name=field_8 id=field_8 size=20 value="" style="background-image:url(imgs/email.png); background-repeat: no-repeat;  padding: 2px 2px 2px 25px;"></li>

				<li class="mainForm" id="fieldBox_9">
					<label class="formFieldQuestion">Phone Number&nbsp;*</label><input class=mainForm type=phone name=field_9 id=field_9 size=20 value="" style="background-image:url(imgs/phone.png); background-repeat: no-repeat;  padding: 2px 2px 2px 25px;"></li>

				<li class="mainForm" id="fieldBox_10">
					<label class="formFieldQuestion">Have you attended National Police Week before?</label><span><input class=mainForm type=radio name=field_10 id=field_10_option_1 value="Yes" /><label class=formFieldOption for="field_10_option_1">Yes</label><input class=mainForm type=radio name=field_10 id=field_10_option_2 value="No" /><label class=formFieldOption for="field_10_option_2">No</label></span></li>

				<li class="mainForm" id="fieldBox_11">
					<label class="formFieldQuestion">Are you the Memorial Service Escort Officer for the May 15th Service?</label><span><input class=mainForm type=radio name=field_11 id=field_11_option_1 value="Yes" /><label class=formFieldOption for="field_11_option_1">Yes</label><input class=mainForm type=radio name=field_11 id=field_11_option_2 value="No" /><label class=formFieldOption for="field_11_option_2">No</label></span></li>

				<li class="mainForm" id="fieldBox_12">
					<label class="formFieldQuestion">Are you the primary survivor of a 2010 fallen officer?</label><span><input class=mainForm type=radio name=field_12 id=field_12_option_1 value="Yes" /><label class=formFieldOption for="field_12_option_1">Yes</label><input class=mainForm type=radio name=field_12 id=field_12_option_2 value="No" /><label class=formFieldOption for="field_12_option_2">No</label></span></li>

				<li class="mainForm" id="fieldBox_13">
					<label class="formFieldQuestion">Name of the Officer</label><input class=mainForm type=text name=field_13 id=field_13 size='20' value=''></li>

				<li class="mainForm" id="fieldBox_14">
					<label class="formFieldQuestion">End of Watch</label><input type=text  name=field_14 id=field_14 value=""><button type=reset class=calendarStyle id=fieldDateTrigger_14></button><SCRIPT type='text/javascript'>   Calendar.setup({
								inputField     :    "field_14",   
								ifFormat       :    "%m/%d/%Y",   
								showsTime      :    false,          
								button         :    "fieldDateTrigger_14",
								singleClick    :    true,           
								step           :    1                
								});</SCRIPT></li>

				<li class="mainForm" id="fieldBox_15">
					<label class="formFieldQuestion">Your relationship to the officer</label><select class=mainForm name=field_15 id=field_15><option value=''></option><option value="Adult Child">Adult Child</option><option value="Agency Head">Agency Head</option><option value="Child">Child</option><option value="Co-Worker">Co-Worker</option><option value="Escort Officer">Escort Officer</option><option value="Father">Father</option><option value="Fiancee">Fiancee</option><option value="Former Spouse">Former Spouse</option><option value="Grand Child">Grand Child</option><option value="Grand Father">Grand Father</option><option value="Grand Mother">Grand Mother</option><option value="In-Law">In-Law</option><option value="Mother">Mother</option><option value="Other">Other</option><option value="Sibling">Sibling</option><option value="Step Father">Step Father</option><option value="Step Mother">Step Mother</option><option value="Significant Other">Significant Other</option><option value="Spouse">Spouse</option></select></li>
		
        
        
        
        
		
		<!-- end of this page -->

		<!-- page validation -->
		<SCRIPT type=text/javascript>
		<!--
			function validatePage1()
			{
				retVal = true;
				if (validateField('field_1','fieldBox_1','menu',0) == false)
 retVal=false;
if (validateField('field_2','fieldBox_2','text',1) == false)
 retVal=false;
if (validateField('field_3','fieldBox_3','text',1) == false)
 retVal=false;
if (validateField('field_4','fieldBox_4','text',0) == false)
 retVal=false;
if (validateField('field_5','fieldBox_5','text',0) == false)
 retVal=false;
if (validateField('field_6','fieldBox_6','state',0) == false)
 retVal=false;
if (validateField('field_7','fieldBox_7','text',0) == false)
 retVal=false;
if (validateField('field_8','fieldBox_8','email',1) == false)
 retVal=false;
if (validateField('field_9','fieldBox_9','phone',1) == false)
 retVal=false;
if (validateField('field_10','fieldBox_10','radio',0) == false)
 retVal=false;
if (validateField('field_11','fieldBox_11','radio',0) == false)
 retVal=false;
if (validateField('field_12','fieldBox_12','radio',0) == false)
 retVal=false;
if (validateField('field_13','fieldBox_13','text',0) == false)
 retVal=false;
if (validateDate('field_14','fieldBox_14','date',0,'','') == false)
 retVal=false;
if (validateField('field_15','fieldBox_15','menu',0) == false)
 retVal=false;

				if(retVal == false)
				{
					alert('Please correct the errors.  Fields marked with an asterisk (*) are required');
					return false;
				}
				return retVal;
			}
		//-->
		</SCRIPT>

		<!-- end page validaton -->



		<!-- next page buttons --><li class="mainForm">
					<input type=button onClick="if (validatePage1()) { collapseElem('mainForm_1'); expandElem('mainForm_2');}" class="mainForm" value="Go to page 2"/>	
				</li>
		<!-- close the display stuff for this page -->
		</ul>
<ul class=mainForm id="mainForm_2">

				<li class="mainForm" id="fieldBox_16">
				  <h3 align="center">Registration for Household Members</h3>
				</li>
2
Contributors
1
Reply
3
Views
6 Years
Discussion Span
Last Post by Arkinder
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.