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> 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. DO NOT combine households on a single registration. Combining households on a single registration DOES NOT guarantee everyone will be booked at the same hotel. 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 *</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 *</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 *</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 *</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>