The UserInformation.html file creates the user interface to allow end users to enter personal information. Listing 6-1 shows the contents of the UserInformation.html file:
Listing 6-1: The UserInformation.html File
<HTML> <HEAD> <TITLE>New User </TITLE> <script language="javascript"> function openwindow(pagename,windowname) { if(document.profileenteryform.firstname.value=="") { alert('First name is a required field.'); return false; } else { if(!checkForInt(document.profileenteryform.firstname.value)) { alert('Please enter a valid value for first name.'); return false; } } if(document.profileenteryform.lastname.value=="") { alert('Last Name is a required field.'); return false; } else { if(!checkForInt(document.profileenteryform.lastname.value)) { alert('Please enter a valid value for last name.'); return false; } } if(document.profileenteryform.Address.value=="") { alert('Address is a required field.'); return false; } if(document.profileenteryform.City.value=="") { alert('City is a required field.'); return false; } if(document.profileenteryform.emailid.value=="") { alert('Email Id is a required field.'); return false; } else { if(!isEmailAddr(document.profileenteryform.emailid.value)) { alert('Please enter a valid value for email ID.'); return false; } } function checkForInt(valuestring) { var validcharstring=false; var intstring="0123456789!@#$%^&*()_-+=" for(i=0;i<valuestring.length;i++) { if (intstring.indexOf(valuestring.charAt(i))!=-1) { return validcharstring; } } validcharstring=true; return validcharstring; } function isEmailAddr(email) { var result = false; var theStr = new String(email); var index = theStr.indexOf("@"); if (index > 0) { var pindex = theStr.indexOf(".",index); if ((pindex > index+1) && (theStr.length > pindex+1)) result = true; } return result; } city=document.profileenteryform.City.value; address=document.profileenteryform.Address.value; fname=document.profileenteryform.firstname.value; lname=document.profileenteryform.lastname.value; emailid=document.profileenteryform.emailid.value; pagename=pagename+"?city="+city+"&firstname="+fname+"&lastname="+lname+"&email&address"+address; window.open(pagename, windowname, 'width=720, height=622, left=200, top=60,screenX=30, screenY=100'); } </script> </HEAD> <BODY> <FORM NAME="profileenteryform"> <TABLE WIDTH="100%"> <TR> <TD WIDTH="100%" ALIGN="CENTER"> </TD> </TR> <TR> <TD WIDTH="100%" ALIGN="CENTER"> <FONT SIZE="4" COLOR="">Airlines Enquiry System</FONT> </TD> </TR> <TR> <TD WIDTH="100%" ALIGN="CENTER"> </TD> </TR> <TR> <TD WIDTH="100%" ALIGN="CENTER"> </TD> </TR> <TR> <TD WIDTH="100%" ALIGN="CENTER"> <FONT SIZE="4" COLOR="">Enter your personal information:</FONT> </TD> </TR> <TR> <TD WIDTH="100%" ALIGN="CENTER"> </TD> </TR> <TR> <TD> <TABLE align="center" WIDTH="100%" border=0 cellspacing=0 cellpadding=0> <TR> <TD WIDTH="10%"> </TD> <TD WIDTH="30%"> First Name </TD> <TD WIDTH="50%"> <INPUT TYPE="INPUT" size="40%" width="100%" NAME="firstname" VALUE="" maxlength=50> </TD> <TD WIDTH="10%"> </TD> </TR> <TR> <TD WIDTH="10%"> </TD> <TD WIDTH="30%"> Last Name </TD> <TD WIDTH="50%"> <INPUT TYPE="INPUT" size="40%" width="100%" NAME="lastname" VALUE="" maxlength=50> </TD> <TD WIDTH="10%"> </TD> </TR> <TR> <TD WIDTH="10%"> </TD> <TD WIDTH="30%"> Address </TD> <TD WIDTH="50%"> <INPUT TYPE="INPUT" size="40%" width="100%" NAME="Address" VALUE="" maxlength=50> </TD> <TD WIDTH="10%"> </TD> </TR> <TR> <TD WIDTH="10%"> </TD> <TD WIDTH="30%"> City </TD> <TD WIDTH="50%"> <INPUT TYPE="INPUT" size="40%" width="100%" NAME="City" VALUE="" maxlength=50> </TD> <TD WIDTH="10%"> </TD> </TR> <TR> <TD WIDTH="10%"> </TD> <TD WIDTH="30%"> Email ID </TD> <TD WIDTH="50%"> <INPUT TYPE="INPUT" width="100%" size="40%" NAME="emailid" VALUE="" maxlength=50> </TD> <TD WIDTH="10%"> </TD> </TR> <TR> <TD WIDTH="10%"> </TD> <TD WIDTH="30%"> </TD> <TD WIDTH="50%" colspan=2> <INPUT TYPE="BUTTON" NAME="ok" style="width:20%" VALUE="OK" onclick="javascript:openwindow('Reservation.html', 'reservation');"> <INPUT TYPE="BUTTON" NAME="cancel" style="width:20%" VALUE="Cancel" onclick="javascript:window.close();"> </TD> </TR> </TABLE> </TD> </TR> </TABLE> </FORM> </BODY> </HTML>
Download this listing.
The UserInformation.html file creates the Personal Information page, as shown in Figure 6-2:
Figure 6-2: The Personal Information Page