kwd2011
01-07-2012, 05:00 PM
Hello,
Despite my best efforts, I can't quite figure out how to output my form data to a 2nd web page.
I'd really appreciate your suggestions!
<!DOCTYPE html>
<html>
<head>
<title>Red Eye Flight Reservations</title>
<meta charset="UTF-8">
<script type="text/javascript">
function validateForm () {
// Define program variables and constants
var salutation = document.getElementById('salutation'); // Customer's title
var salutationError = "Please select a title!";
var firstname = document.getElementById('fname'); // Customer's first name
var firstnameError = "Please enter your first name!"
var lastname = document.getElementById('lname'); // Customer's last name
var lastnameError = "Please enter your last name!"
var street = document.getElementById('street'); // Customer's street
var streetError = "Please enter your street!"
var city = document.getElementById('city'); // Customer's city
var cityError = "Please enter your city!"
var state = document.getElementById('usstate'); // Customer's state
var stateError = "Please select your state!"
var zip = document.getElementById('zip'); // Customer's zip code
var zip = parseInt(zip);
var zipError = "Please enter a five-digit zip code!"
var phone = document.getElementById('phone'); // Customer's phone number
var phoneError = "Please enter your phone number!"
var email = document.getElementById('email'); // Customer's email address
var emailError = "Please enter your email address!"
var rewards = document.getElementById('rewards'); // Is customer a member of the Red Eye Rewards Program?
var rewardsError = "Please indicate whether you're a Rewards Program member!"
var seating = document.getElementById('seating'); // Customer's seating preference
var seatingError = "Please select a seat location!"
var comments = document.getElementById('comments'); // Customer's comments
var commentsError = "Please enter your comments or suggestions!"
var cardname = document.getElementById('cardname'); // Customer's credit card name
var cardnameError = "Please select your credit card!"
var departFrom = document.getElementById('departFrom'); // City customer is departing from
var departFromError = "Please select your departure city!"
if (validateTitle(salutation, salutationError)) {
if (validateFirstName (firstname, firstnameError)) {
if (validateLastName (lastname, lastnameError)) {
if (validateStreet (street, streetError)) {
if (validateCity (city, cityError)) {
if (validateState (state, stateError)) {
if (validateZip (zip, zipError)) {
if (validatePhone (phone, phoneError)) {
if (validateEmail (email, emailError)) {
if (validateRewards (rewards, rewardsError)) {
if (validateDepartureCity (departFrom, departFromError)) {
if (validateSeating (seating, seatingError)) {
if (validateCardName (cardname, cardnameError)) {
if (validateComments (comments, commentsError)) {
displayInformation();
return true;
}
}
}
}
}
}
}
}
}
}
}
}
}
}
return false;
}
function validateTitle () {
if (document.CustomerInfo.salutation.selectedIndex < 1) {
alert(salutationError);
document.CustomerInfo.salutation.focus();
return false;
} else {
return true;
}
}
function validateFirstName () {
if (document.CustomerInfo.firstname.value.length == 0) {
alert(firstnameError);
document.CustomerInfo.firstname.focus();
return false;
} else {
return true;
}
}
function validateLastName () {
if (document.CustomerInfo.lastname.value.length == 0) {
alert(lastnameError);
document.CustomerInfo.lastname.focus();
return false;
} else {
return true;
}
}
function validateStreet () {
if (document.CustomerInfo.street.value.length == 0) {
alert(streetError);
document.CustomerInfo.street.focus();
return false;
} else {
return true;
}
}
function validateCity () {
if (document.CustomerInfo.city.value.length == 0) {
alert(cityError);
document.CustomerInfo.city.focus();
return false;
} else {
return true;
}
}
function validateState () {
if (document.CustomerInfo.state.selectedIndex < 1) {
alert(stateError);
document.CustomerInfo.state.focus();
return false;
} else {
return true;
}
}
function validateZip () {
var numericExpression = /^[0-9]+$/;
if (document.CustomerInfo.zip.value.match(numericExpr ession)) {
return true;
} else {
alert(zipError);
document.CustomerInfo.zip.focus();
return false;
}
}
function validatePhone () {
if (document.CustomerInfo.phone.value.length == 0) {
alert(phoneError);
document.CustomerInfo.phone.focus();
return false;
} else {
return true;
}
}
function validateEmail () {
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(document.CustomerInfo.email.value.match(emailEx p)) {
return true;
} else {
alert(emailError);
document.CustomerInfo.email.focus();
return false;
}
}
function validateRewards() {
for(var i=0; i < document.CustomerInfo.rewards.length; i++) {
if(document.CustomerInfo.rewards[i].checked) return document.CustomerInfo.rewards[i].value;
}
alert(rewardsError);
return false;
}
function validateDepartureCity () {
if (document.CustomerInfo.departFrom.selectedIndex < 1) {
alert(departFromError);
document.CustomerInfo.departFrom.focus();
return false;
} else {
return true;
}
}
function validateSeating () {
if (document.CustomerInfo.seating.selectedIndex < 1) {
alert(seatingError);
document.CustomerInfo.seating.focus();
return false;
} else {
return true;
}
}
function validateCardName () {
if (document.CustomerInfo.cardname.selectedIndex < 1) {
alert(cardnameError);
document.CustomerInfo.cardname.focus();
return false;
} else {
return true;
}
}
function validateComments () {
if (document.CustomerInfo.comments.value == "") {
alert(commentsError);
document.CustomerInfo.comments.focus();
return false;
} else {
return true;
}
}
function displayInformation () {
window.open("results.htm","newWin","toolbar=yes, scrollbars=yes, resizable=no, width=400, height=400");
}
</script>
</head>
<body>
<h2>Red Eye Airlines Reservations</h2>
<form name="CustomerInfo" method="POST" target="newWin" id="CustomerInfo" onsubmit="return validateForm();" action="results.htm">
<p>Title:
<select name="mytitle" id="salutation">
<option>Choose Title</option>
<option>Mr.</option>
<option>Mrs.</option>
<option>Ms.</option>
</select>
First Name:
<input type="text" name="firstname" id="fname" size="15" maxlength="15" />
Last Name:
<input type="text" name="lastname" id="lname" size="20" maxlength="20" /><br /><br />
Street Address:
<input type="text" name="street" id="street" size="20" maxlength="20" />
City:
<input type="text" name="city" id="city" size="15" maxlength="15" />
State:
<select name="state" id="usstate">
<option>Select state</option>
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="DC">DC</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
</select>
<br /><br />
Zip:
<input name="zip" id="zip" type="text" size="7" maxlength="5" />
Phone:
<input type="text" name="phone" id="phone" size="12" maxlength="10" />
E-Mail Address:
<input type="text" name="email" id="email" value="" size="20" maxlength="20" />
</p>
<p>Are you a member of our Red Eyes Rewards Program?
<input type="radio" name="redeye" id="rewards" value="yes" />Yes
<input type="radio" name="redeye" id="rewards" value="no" />No</p>
<p>I will be departing from:<br />
<select name="departFrom" id="departFrom">
<option>Choose Departure City</option>
<option value="ATLANTA">Atlanta (GA)</option>
<option value="CLEVELAND">Cleveland (OH)</option>
<option value="INDIANAPOLIS">Indianapolis (IN)</option>
<option value="LOUISVILLE">Louisville (KY)</option>
<option value="MEMPHIS">Memphis (TN)</option>
</select>
</p>
<p>Where do you prefer to sit on the aircraft?:<br />
<select name="seating" id="seating">
<option>Choose Seat Location</option>
<option value="windowseat">Window Seat</option>
<option value="centerseat">Center Seat</option>
<option value="aisleseat">Aisle Seat</option>
</select>
</p>
<p>Please select your payment method:
<br />
<select name="cardname" id="cardname">
<option>Select Card</option>
<option>Visa</option>
<option>MasterCard</option>
<option>Discover</option>
</select></p>
<p>Comments:
<br />
<textarea name="comments" id="comments" rows="6" cols="80"></textarea></p>
<p><input type="reset" value="Reset" />
<input type="submit" name="goButton" value="Submit" /></p>
<p>Thank you for your order!</p>
<p>We look forward to serving you on Red Eye Airlines!</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My Results Page</title>
</head>
<body>
<p>Return the value of each element in the form:</p>
<script type="text/javascript" >
var x=document.getElementById("CustomerInfo");
for (var i=0;i<x.length;i++)
{
document.write(x.elements[i].value);
document.write("<br />");
}
</script>
</body>
</html>
Despite my best efforts, I can't quite figure out how to output my form data to a 2nd web page.
I'd really appreciate your suggestions!
<!DOCTYPE html>
<html>
<head>
<title>Red Eye Flight Reservations</title>
<meta charset="UTF-8">
<script type="text/javascript">
function validateForm () {
// Define program variables and constants
var salutation = document.getElementById('salutation'); // Customer's title
var salutationError = "Please select a title!";
var firstname = document.getElementById('fname'); // Customer's first name
var firstnameError = "Please enter your first name!"
var lastname = document.getElementById('lname'); // Customer's last name
var lastnameError = "Please enter your last name!"
var street = document.getElementById('street'); // Customer's street
var streetError = "Please enter your street!"
var city = document.getElementById('city'); // Customer's city
var cityError = "Please enter your city!"
var state = document.getElementById('usstate'); // Customer's state
var stateError = "Please select your state!"
var zip = document.getElementById('zip'); // Customer's zip code
var zip = parseInt(zip);
var zipError = "Please enter a five-digit zip code!"
var phone = document.getElementById('phone'); // Customer's phone number
var phoneError = "Please enter your phone number!"
var email = document.getElementById('email'); // Customer's email address
var emailError = "Please enter your email address!"
var rewards = document.getElementById('rewards'); // Is customer a member of the Red Eye Rewards Program?
var rewardsError = "Please indicate whether you're a Rewards Program member!"
var seating = document.getElementById('seating'); // Customer's seating preference
var seatingError = "Please select a seat location!"
var comments = document.getElementById('comments'); // Customer's comments
var commentsError = "Please enter your comments or suggestions!"
var cardname = document.getElementById('cardname'); // Customer's credit card name
var cardnameError = "Please select your credit card!"
var departFrom = document.getElementById('departFrom'); // City customer is departing from
var departFromError = "Please select your departure city!"
if (validateTitle(salutation, salutationError)) {
if (validateFirstName (firstname, firstnameError)) {
if (validateLastName (lastname, lastnameError)) {
if (validateStreet (street, streetError)) {
if (validateCity (city, cityError)) {
if (validateState (state, stateError)) {
if (validateZip (zip, zipError)) {
if (validatePhone (phone, phoneError)) {
if (validateEmail (email, emailError)) {
if (validateRewards (rewards, rewardsError)) {
if (validateDepartureCity (departFrom, departFromError)) {
if (validateSeating (seating, seatingError)) {
if (validateCardName (cardname, cardnameError)) {
if (validateComments (comments, commentsError)) {
displayInformation();
return true;
}
}
}
}
}
}
}
}
}
}
}
}
}
}
return false;
}
function validateTitle () {
if (document.CustomerInfo.salutation.selectedIndex < 1) {
alert(salutationError);
document.CustomerInfo.salutation.focus();
return false;
} else {
return true;
}
}
function validateFirstName () {
if (document.CustomerInfo.firstname.value.length == 0) {
alert(firstnameError);
document.CustomerInfo.firstname.focus();
return false;
} else {
return true;
}
}
function validateLastName () {
if (document.CustomerInfo.lastname.value.length == 0) {
alert(lastnameError);
document.CustomerInfo.lastname.focus();
return false;
} else {
return true;
}
}
function validateStreet () {
if (document.CustomerInfo.street.value.length == 0) {
alert(streetError);
document.CustomerInfo.street.focus();
return false;
} else {
return true;
}
}
function validateCity () {
if (document.CustomerInfo.city.value.length == 0) {
alert(cityError);
document.CustomerInfo.city.focus();
return false;
} else {
return true;
}
}
function validateState () {
if (document.CustomerInfo.state.selectedIndex < 1) {
alert(stateError);
document.CustomerInfo.state.focus();
return false;
} else {
return true;
}
}
function validateZip () {
var numericExpression = /^[0-9]+$/;
if (document.CustomerInfo.zip.value.match(numericExpr ession)) {
return true;
} else {
alert(zipError);
document.CustomerInfo.zip.focus();
return false;
}
}
function validatePhone () {
if (document.CustomerInfo.phone.value.length == 0) {
alert(phoneError);
document.CustomerInfo.phone.focus();
return false;
} else {
return true;
}
}
function validateEmail () {
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(document.CustomerInfo.email.value.match(emailEx p)) {
return true;
} else {
alert(emailError);
document.CustomerInfo.email.focus();
return false;
}
}
function validateRewards() {
for(var i=0; i < document.CustomerInfo.rewards.length; i++) {
if(document.CustomerInfo.rewards[i].checked) return document.CustomerInfo.rewards[i].value;
}
alert(rewardsError);
return false;
}
function validateDepartureCity () {
if (document.CustomerInfo.departFrom.selectedIndex < 1) {
alert(departFromError);
document.CustomerInfo.departFrom.focus();
return false;
} else {
return true;
}
}
function validateSeating () {
if (document.CustomerInfo.seating.selectedIndex < 1) {
alert(seatingError);
document.CustomerInfo.seating.focus();
return false;
} else {
return true;
}
}
function validateCardName () {
if (document.CustomerInfo.cardname.selectedIndex < 1) {
alert(cardnameError);
document.CustomerInfo.cardname.focus();
return false;
} else {
return true;
}
}
function validateComments () {
if (document.CustomerInfo.comments.value == "") {
alert(commentsError);
document.CustomerInfo.comments.focus();
return false;
} else {
return true;
}
}
function displayInformation () {
window.open("results.htm","newWin","toolbar=yes, scrollbars=yes, resizable=no, width=400, height=400");
}
</script>
</head>
<body>
<h2>Red Eye Airlines Reservations</h2>
<form name="CustomerInfo" method="POST" target="newWin" id="CustomerInfo" onsubmit="return validateForm();" action="results.htm">
<p>Title:
<select name="mytitle" id="salutation">
<option>Choose Title</option>
<option>Mr.</option>
<option>Mrs.</option>
<option>Ms.</option>
</select>
First Name:
<input type="text" name="firstname" id="fname" size="15" maxlength="15" />
Last Name:
<input type="text" name="lastname" id="lname" size="20" maxlength="20" /><br /><br />
Street Address:
<input type="text" name="street" id="street" size="20" maxlength="20" />
City:
<input type="text" name="city" id="city" size="15" maxlength="15" />
State:
<select name="state" id="usstate">
<option>Select state</option>
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="DC">DC</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
</select>
<br /><br />
Zip:
<input name="zip" id="zip" type="text" size="7" maxlength="5" />
Phone:
<input type="text" name="phone" id="phone" size="12" maxlength="10" />
E-Mail Address:
<input type="text" name="email" id="email" value="" size="20" maxlength="20" />
</p>
<p>Are you a member of our Red Eyes Rewards Program?
<input type="radio" name="redeye" id="rewards" value="yes" />Yes
<input type="radio" name="redeye" id="rewards" value="no" />No</p>
<p>I will be departing from:<br />
<select name="departFrom" id="departFrom">
<option>Choose Departure City</option>
<option value="ATLANTA">Atlanta (GA)</option>
<option value="CLEVELAND">Cleveland (OH)</option>
<option value="INDIANAPOLIS">Indianapolis (IN)</option>
<option value="LOUISVILLE">Louisville (KY)</option>
<option value="MEMPHIS">Memphis (TN)</option>
</select>
</p>
<p>Where do you prefer to sit on the aircraft?:<br />
<select name="seating" id="seating">
<option>Choose Seat Location</option>
<option value="windowseat">Window Seat</option>
<option value="centerseat">Center Seat</option>
<option value="aisleseat">Aisle Seat</option>
</select>
</p>
<p>Please select your payment method:
<br />
<select name="cardname" id="cardname">
<option>Select Card</option>
<option>Visa</option>
<option>MasterCard</option>
<option>Discover</option>
</select></p>
<p>Comments:
<br />
<textarea name="comments" id="comments" rows="6" cols="80"></textarea></p>
<p><input type="reset" value="Reset" />
<input type="submit" name="goButton" value="Submit" /></p>
<p>Thank you for your order!</p>
<p>We look forward to serving you on Red Eye Airlines!</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My Results Page</title>
</head>
<body>
<p>Return the value of each element in the form:</p>
<script type="text/javascript" >
var x=document.getElementById("CustomerInfo");
for (var i=0;i<x.length;i++)
{
document.write(x.elements[i].value);
document.write("<br />");
}
</script>
</body>
</html>