<html>
<head>
<title>Bannerocity - Personalized Online Sky Banners</title>
<link rel="stylesheet" type="text/css" href="bannerocity.css" />
<script type="text/javascript">
function validateRegEx(regex, input, helpText, helpMessage) {
// See if the input data validates OK
if (!regex.test(input)) {
// The data is invalid, so set the help message and return false
if (helpText != null)
helpText.innerHTML = helpMessage;
return false;
}
else {
// The data is OK, so clear the help message and return true
if (helpText != null)
helpText.innerHTML = "";
return true;
}
}
function validateNonEmpty(inputField, helpText) {
// See if the input value contains any text
return validateRegEx(/.+/,
inputField.value, helpText,
"Please enter a value.");
}
function validateLength(minLength, maxLength, inputField, helpText) {
// See if the input value contains at least minLength but no more than maxLength characters
return validateRegEx(new RegExp("^.{" + minLength + "," + maxLength + "}$"),
inputField.value, helpText,
"Please enter a value " + minLength + " to " + maxLength +
" characters in length.");
}
function validateZipCode(inputField, helpText) {
// First see if the input value contains data
if (!validateNonEmpty(inputField, helpText))
return false;
// Then see if the input value is a ZIP code
return validateRegEx(/^\d{5}$/,
inputField.value, helpText,
"Please enter a 5-digit ZIP code.");
}
function validateDate(inputField, helpText) {
// First see if the input value contains data
if (!validateNonEmpty(inputField, helpText))
return false;
// Then see if the input value is a date
return validateRegEx(/^\d{2}\/\d{2}\/\d{2,4}$/,
inputField.value, helpText,
"Please enter a date (for example, 01/14/1975).");
}
function placeOrder(form) {
if (validateLength(1, 32, form["message"], form["message_help"]) &&
validateZipCode(form["zipcode"], form["zipcode_help"]) &&
validateDate(form["date"], form["date_help"]) &&
validateNonEmpty(form["name"], form["name_help"]) &&
validateNonEmpty(form["phone"], form["phone_help"]) &&
validateNonEmpty(form["email"], form["email_help"])) {
// Submit the order to the server
form.submit();
} else {
alert("I'm sorry but there is something wrong with the order information.");
}
}
</script>
</head>
<body onload="document.getElementById('message').focus()">
<div class="heading">
<img id="logo" src="logo.png" alt="Bannerocity" />
</div>
<form name="orderform" action="bannerocity.php" method="POST">
<div class="field">
Enter the banner message:
<input id="message" name="message" type="text" size="32"
onblur="validateLength(1, 32, this, document.getElementById('message_help'))" />
<span id="message_help" class="help"></span>
</div>
<div class="field">
Enter ZIP code of the location:
<input id="zipcode" name="zipcode" type="text" size="5"
onblur="validateZipCode(this, document.getElementById('zipcode_help'))" />
<span id="zipcode_help" class="help"></span>
</div>
<div class="field">
Enter the date for the message to be shown:
<input id="date" name="date" type="text" size="10"
onblur="validateDate(this, document.getElementById('date_help'))" />
<span id="date_help" class="help"></span>
</div>
<div class="field">
Enter your name:
<input id="name" name="name" type="text" size="32"
onblur="validateNonEmpty(this, document.getElementById('name_help'))" />
<span id="name_help" class="help"></span>
</div>
<div class="field">
Enter your phone number:
<input id="phone" name="phone" type="text" size="12"
onblur="validateNonEmpty(this, document.getElementById('phone_help'))" />
<span id="phone_help" class="help"></span>
</div>
<div class="field">
Enter your email address:
<input id="email" name="email" type="text" size="32"
onblur="validateNonEmpty(this, document.getElementById('email_help'))" />
<span id="email_help" class="help"></span>
</div>
<input type="button" value="Order Banner" onclick="placeOrder(this.form);" />
</form>
</body>
</html> |