i've save this as.. Reservation.htm
<html>
<head>
<title>Room Reservation</title>
<base target="_self">
<script Language="JavaScript">
<!--
function Form1_Validator(theForm)
{
var alertsay = ""; // define for long lines
// alertsay is not necessary for your code,
// but I need to break my lines in multiple lines
// so the code won't extend off the edge of the page
// check if ReservationID field is blank
if (theForm.id.value == "")
{
alert("Please enter a value for the \"Reservation ID\" field.");
theForm.id.focus();
return (false);
}
// only allow numbers to be entered
var checkOK = "0123456789";
var checkStr = theForm.id.value;
var allValid = true;
var allNum = "";
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
if (ch != ",")
allNum += ch;
}
if (!allValid)
{
alert("Please enter only digit characters in the \"Reservation ID\" field.");
theForm.id.focus();
return (false);
}
// check if name field is blank
if (theForm.txtname.value == "")
{
alert("Please enter a value for the \"Name\" field.");
theForm.txtname.focus();
return (false);
}
// allow ONLY alphabetic keys, no symbols or punctuation
// this can be altered for any "checkOK" string you desire
var checkOK = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var checkStr = theForm.txtname.value;
var allValid = true;
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
}
if (!allValid)
{
alert("Please enter only alphabetic characters in the \"Name\" field.");
theForm.txtname.focus();
return (false);
}
// check if the street address field is blank
if (theForm.txtadd.value == "")
{
alert("Please enter a value for the \"Street Address\" field.");
theForm.txtadd.focus();
return (false);
}
// check if city field is blank
if (theForm.txtcity.value == "")
{
alert("Please enter a value for the \"City\" field.");
theForm.txtcity.focus();
return (false);
}
// check if state field is blank
if (theForm.txtstate.value == "")
{
alert("Please enter a value for the \"State or Province\" field.");
theForm.txtstate.focus();
return (false);
}
// check if zip code field is blank
if (theForm.txtzip.value == "")
{
alert("Please enter a value for the \"Zip Code\" field.");
theForm.txtzip.focus();
return (false);
}
// only allow numbers to be entered
var checkOK = "0123456789";
var checkStr = theForm.txtzip.value;
var allValid = true;
var allNum = "";
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
if (ch != ",")
allNum += ch;
}
if (!allValid)
{
alert("Please enter only digit characters in the \"zip code\" field.");
theForm.txtzip.focus();
return (false);
}
// check if country field is blank
if (theForm.txtcountry.value == "")
{
alert("Please enter a value for the \"Country\" field.");
theForm.txtcountry.focus();
return (false);
}
// check if email field is blank
if (theForm.txtemail.value == "")
{
alert("Please enter a value for the \"Email\" field.");
theForm.txtemail.focus();
return (false);
}
// test if valid email address, must have @ and .
var checkEmail = "@.";
var checkStr = theForm.txtemail.value;
var EmailValid = false;
var EmailAt = false;
var EmailPeriod = false;
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkEmail.length; j++)
{
if (ch == checkEmail.charAt(j) && ch == "@")
EmailAt = true;
if (ch == checkEmail.charAt(j) && ch == ".")
EmailPeriod = true;
if (EmailAt && EmailPeriod)
break;
if (j == checkEmail.length)
break;
}
// if both the @ and . were in the string
if (EmailAt && EmailPeriod)
{
EmailValid = true
break;
}
}
if (!EmailValid)
{
alert("The \"E-mail\" field must contain an \"@\" and a \".\".");
theForm.txtemail.focus();
return (false);
}
// check if no drop down has been selected
if (theForm.card.selectedIndex < 0)
{
alert("Please select one of the \"Credit Cards\" options.");
theForm.card.focus();
return (false);
}
// check if the first drop down is selected, if so, invalid selection
if (theForm.card.selectedIndex == 0)
{
alert("The first \"Credit Card\" option is not a valid selection.Please select your Credit Card Selection");
theForm.card.focus();
return (false);
}
// check if card holder name field is blank
if (theForm.txtcname.value == "")
{
alert("Please enter a value for the \"Cardholder's Name\" field.");
theForm.txtcname.focus();
return (false);
}
// check if both name and card holder name fields are the same
if (theForm.txtname.value != theForm.txtcname.value)
{
alert("The Name and the Cardholder Name are not the same. Please re-enter!");
theForm.txtcname.focus();
return (false);
}
// check if card holder number field is blank
if (theForm.txtcnumber.value == "")
{
alert("Please enter a value for the \"Credit Card Number\" field.");
theForm.txtcnumber.focus();
return (false);
}
// only allow 0-9 and hyphen to be entered
var checkOK = "0123456789-,";
var checkStr = theForm.txtcnumber.value;
var allValid = true;
var decPoints = 0;
var allNum = "";
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
if (ch != ",")
allNum += ch;
}
if (!allValid)
{
alert("Please enter only digit characters in the \"Credit Card Number\" field.");
theForm.txtcnumber.focus();
return (false);
}
// check if no drop down or first drop down is selected, if so, invalid selection
if (theForm.date_month.selectedIndex <= 0)
{
alert("Please select a month.");
theForm.date_month.focus();
return (false);
}
// check if no drop down or first drop down is selected, if so, invalid selection
if (theForm.date_year.selectedIndex <= 0)
{
alert("Please select a year.");
theForm.date_year.focus();
return (false);
}
// because this is a sample page, don't allow to exit to the post action
// comes in handy when you are testing the form validations and don't
// wish to exit the page
alertsay = "Please check all the data, if you satify...please click OK."
alert(alertsay);
return (true);
// replace the above with return(true); if you have a valid form to submit to
return (true);
}
//--></script>
</head>
<body bgcolor="#000066" text="#FFFFFF" link="#FFFF00" vlink="#FF00FF">
<h1 align="center"><u>Room Reservation</u></h1>
<p align="center"> </p>
<form METHOD="POST" ACTION="RoomOK.asp" onsubmit="return Form1_Validator(this)" name="Form1">
<p> </p>
<p><font size="4">Fill in the blank of your contact detail:-</font></p>
<blockquote>
<table width="497">
<tr>
<td ALIGN="right" width="168">Reservation ID</td>
<td width="319"> <input name="id" size="11"> </td>
</tr>
<tr>
<td ALIGN="right" width="168"><em style="font-style: normal">Name:</em></td>
<td width="319"><b> <input NAME="txtname" SIZE="35"> </b> </td>
</tr>
<tr>
<td ALIGN="right" width="168"><em style="font-style: normal">Street Address:</em></td>
<td width="319"><b> <input NAME="txtadd" SIZE="35"></b></td>
</tr>
<tr>
<td ALIGN="right" width="168"><em style="font-style: normal">City:</em></td>
<td width="319"><b> <input NAME="txtcity" SIZE="35"></b></td>
</tr>
<tr>
<td ALIGN="right" width="168"><em style="font-style: normal">State/Province:</em></td>
<td width="319"><b> <input NAME="txtstate" SIZE="35"> </b></td>
</tr>
<tr>
<td ALIGN="right" width="168">
<p align="left"><em style="font-style: normal">
Zip/Postal Code:</em></td>
<td width="319"><b> <input NAME="txtzip" SIZE="13" MAXLENGTH="12"></b></td>
</tr>
<tr>
<td ALIGN="right" width="168"><em style="font-style: normal">Country:</em></td>
<td width="319"><b> <input NAME="txtcountry" SIZE="25"></b></td>
</tr>
<tr>
<td ALIGN="right" width="168"><em style="font-style: normal">E-mail: </em></td>
<td width="319"><b> <input NAME="txtemail" SIZE="25"></b></td>
</tr>
</table>
</blockquote>
<p> </p>
<p><b>Please provide the following Room Reservation information:</b></p>
<table border="1" width="23%">
<tr>
<td width="100%" align="left" bgcolor="#FFFF00"><font size="4">
<font color="#000000" size="4"><b><u>Room Types:</u></b></font></font></td>
</tr>
</table>
<table border="1" width="767" height="238">
<tr>
<td width="252" height="42"><font size="3"><input type="checkbox" name="C1" value="ON">
Dormitory - RM 8.00</font></td>
<td width="499" height="42"><font size="3"><input type="checkbox" name="C5" value="ON">
Triple Room with Fan - RM 30.00</font></td>
</tr>
<tr>
<td width="252" height="42"><font size="3"><input type="checkbox" name="C2" value="ON">
Private Dorm - RM 10.00</font></td>
<td width="499" height="42"><font size="3"><input type="checkbox" name="C6" value="ON">
Quadruple Room with Fan - RM 40.00</font></td>
</tr>
<tr>
<td width="252" height="42"><font size="3"><input type="checkbox" name="C3" value="ON">
Single Room with Fan - RM 20.00</font></td>
<td width="499" height="42"><font size="3"><input type="checkbox" name="C7" value="ON">
Double Room with Air Condition - RM 40.00</font></td>
</tr>
<tr>
<td width="252" height="42"><font size="3"><input type="checkbox" name="C4" value="ON">
Double Room with Fan - RM 25.00</font></td>
<td width="499" height="42"><font size="3"><input type="checkbox" name="C8" value="ON">
Triple Room with Air Condition - RM 50.00</font></td>
</tr>
<tr>
<td width="757" height="81" colspan="2">
<font size="3">Additional Chargers:</font>
<p><font size="3"><input type="checkbox" name="C9" value="ON"> Pillow
<input type="text" name="txtExPillow" size="2">Quantity <br>
<input type="checkbox" name="C10" value="ON"> Mattress
<input type="text" name="txtExMattress" size="2">Quantity <br>
<input type="checkbox" name="C11" value="ON">
Blanket
<input type="text" name="txtExBlanket" size="2">Quantity </font></p>
<p><font size="3"> RM 5.00 for each Quantity. </font></p>
<p> </td>
</tr>
<tr>
<td width="252" height="27">
<p align="right"><font face="Times New Roman">
<em style="font-style: normal"><b> </b>
Credit Card:</em></font></td>
<td width="499" height="27">
<b>
<font face="Times New Roman">
<select name="card" size="1">
<option>Select Your Credit Card</option>
<option value="V">Visa</option>
<option value="M">MasterCard</option>
<option value="D">Diner's Club</option>
<option value="A">American Express</option>
</select> </font> </b>
</td>
</tr>
<tr>
<td ALIGN="right" width="252" height="20"><font face="Times New Roman">
<em style="font-style: normal">Cardholder Name:</em></font></td>
<td width="499" height="20"><b><font face="Times New Roman"> <input TYPE="TEXT" NAME="txtcname" SIZE="35"></font></b></td>
</tr>
<tr>
<td ALIGN="right" width="252" height="26"><font face="Times New Roman">
<em style="font-style: normal">Card Number:</em></font></td>
<td width="499" height="26"><b><font face="Times New Roman"> <input NAME="txtcnumber" SIZE="35"></font></b></td>
</tr>
<tr>
<td ALIGN="right" width="252" height="25"><font face="Times New Roman">
<em style="font-style: normal">Expiration Date:</em></font></td>
<td width="499" height="25"><b><font face="Times New Roman"> Month <select NAME="date_month">
<option VALUE="0">----
<option VALUE="1">January
<option VALUE="2">Febuary
<option VALUE="3">March
<option VALUE="4">April
<option VALUE="5">May
<option VALUE="6">June
<option VALUE="7">July
<option VALUE="8">August
<option VALUE="9">September
<option VALUE="10">October
<option VALUE="11">November
<option VALUE="12">December
</select> Year
<select NAME="date_year">
<option VALUE="0">----
<option VALUE="2005">2005
<option VALUE="2006">2006
<option VALUE="2007">2007
<option VALUE="2008">2008
<option VALUE="2009">2009
<option VALUE="2010">2010
</select> </font> </b> </td>
</tr>
<tr>
<td width="757" colspan="2" height="46">
<p></p>
</td>
</tr>
</table>
<blockquote>
<p> </p>
</blockquote>
<input TYPE="SUBMIT" VALUE="Submit "> <input TYPE="RESET" VALUE="Reset Form">
<p> </p>
<p>
Back to <a href="Indroduction.htm">HOME</a></p>
<p> </p>
</form>
<hr>
<p align="center"><font size="2" face="Times New Roman">
Copyright© 2004 Sumitha@Sumi </font><font face="Wingdings" size="3">?</font><font size="2">
</font><font size="2" face="Times New Roman"><small>All rights reserved.</small></font></p>
<p align="center"> </p>
</body>
</html>
