Creating the Signup Page
The signuppage.html file creates the sign up page that allows end users to create a new account. Listing 5-2 shows the contents of the signuppage.html file:
Listing 5-2: The signuppage.html File
 |
<HTML> <HEAD> <TITLE>Signup Page</TITLE> <SCRIPT language="javascript"> function openwindow(pagename,windowname) { if(document.profileenteryform.username.value=="") { alert('User name is a required field.'); return false; } if(document.profileenteryform.password.value=="") { alert('Password is a required field.'); return false; } if(document.profileenteryform.cpassword.value=="") { alert('Confirm Password is a required field.'); return false; } if(document.profileenteryform.password.value!=document.profileenteryform.password.value) { alert('Password and Confirm Password must be same.'); return false; } 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.emailid.value=="") { alert('Email Id is a required field.'); return false; } else { if(!isEmailAddr(document.profileenteryform.emailid.value)) { alert('Please enter a valid 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; } user_name=document.profileenteryform.username.value; pwd=document.profileenteryform.password.value; fname=document.profileenteryform.firstname.value; lname=document.profileenteryform.lastname.value; emailid=document.profileenteryform.emailid.value; pagename=pagename+"?username="+user_name+"&password="+pwd+"&firstname="+fname+"&lastname=" +lname+"&emailprofileenteryform"> <TABLE WIDTH="100%"> <TR> <TD WIDTH="100%" ALIGN="CENTER"> </TD> </TR> <TR> <TD WIDTH="100%" ALIGN="CENTER"> <FONT SIZE="4" COLOR=""> Signup for New Account </FONT> </TD> </TR> <TR> <TD WIDTH="100%" ALIGN="CENTER"> </TD> </TR> <TR> <TD> <TABLE ALIGN="CENTER" WIDTH="100%" > <TR> <TD WIDTH="10%"> </TD> <TD WIDTH="20%"> User Name </TD> <TD WIDTH="40%"> <INPUT TYPE="INPUT" NAME="username" VALUE="" maxlength=50> </TD> <TD WIDTH="10%"> </TD> </TR> <TR> <TD WIDTH="10%"> </TD> <TD WIDTH="30%"> Password </TD> <TD WIDTH="30%"> <INPUT TYPE="password" NAME="password" VALUE="" maxlength=50> </TD> <TD WIDTH="10%"> </TD> </TR> <TR> <TD WIDTH="10%"> </TD> <TD WIDTH="30%"> Confirm Password </TD> <TD WIDTH="30%"> <INPUT TYPE="PASSWORD" NAME="cpassword" VALUE="" maxlength=50> </TD> <TD WIDTH="10%"> </TD> </TR> <TR> <TD WIDTH="10%"> </TD> <TD WIDTH="30%"> First Name </TD> <TD WIDTH="30%"> <INPUT TYPE="INPUT" NAME="firstname" VALUE="" maxlength=50> </TD> <TD WIDTH="10%"> </TD> </TR> <TR> <TD WIDTH="10%"> </TD> <TD WIDTH="30%"> Last Name </TD> <TD WIDTH="30%"> <INPUT TYPE="INPUT" NAME="lastname" VALUE="" maxlength=50> </TD> <TD WIDTH="10%"> </TD> </TR> <TR> <TD WIDTH="10%"> </TD> <TD WIDTH="30%"> Email ID </TD> <TD WIDTH="30%"> <INPUT TYPE="INPUT" NAME="emailid" VALUE="" maxlength=50> </TD> <TD WIDTH="10%"> </TD> </TR> <TR> <TD WIDTH="10%"> </TD> <TD WIDTH="30%"> </TD> <TD WIDTH="30%" colspan=2> <INPUT TYPE="BUTTON" NAME="ok" style="width:30%" VALUE="OK" onclick="javascript:openwindow('chathtml.html', 'chatpage');"> <INPUT TYPE="BUTTON" NAME="cancel" style="width:30%" VALUE="Cancel" onclick="javascript:window.close();"> </TD> </TR> </TABLE> </TD> </TR> </TABLE> </FORM> </BODY> </HTML> |
Download this listing.
The Signup.html page creates the signup page, as shown in Figure 5-3:
Figure 5-3: The Signup Page
