dennispipper/ch5_email.html

## ch5_email.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Join Email List</title>
     <!--From Murach's JavaScript and jQuery -->
     <!--http://murach.com/books/qury/index.htm -->

    <style type="text/css">
        /* type selectors */
article, aside, figure, footer, header, nav, section {
    display: block;
}
body { font-family: Arial, Helvetica, sans-serif;background-color: white;margin: 0 auto;width: 650px;border: 3px solid blue;
}
h1 {
    color: blue;
}
section {
    padding: 0 2em 1em;
}
label {
    float: left;width: 11em;text-align: right;
}
input {
    margin-left: 1em;margin-bottom: .5em;
}
span {
    color: red;
}

    </style>
   	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   	<script type="text/javascript">
        var $ = function (id) {
    return document.getElementById(id);
}
/* state code lookup to verify states that gets it
 value from the user, only 9 included, but could be 50
 the function then converts the entry into Uppercase if the user enters lowercase.
 The for loop then compares the user entry with the array of states
 If the entry is equal to one of the 9 listed, then it returns true and the function ends
 Otherwise the for loop ends and returns false and the function ends */
 stateCodeLookup = function (stateCode) {
    var states = ["CA", "WA", "OR", "NV", "NM", "AZ", "WY", "MT", "UT"];
    stateCode = stateCode.toUpperCase();

    for (var i in states) {
        if (states[i] == stateCode) {
            return true;
        }
    }
    return false;
}
//this function gets the entries that user inputs from the form fields and stores them in the variables

var joinList = function () {
    var emailAddress1 = $("email_address1").value;
    var emailAddress2 = $("email_address2").value;
    var isValid = true;

// validate the first email address and make sure something is entered in the text fields
    if (emailAddress1 == "") {
        $("email_address1_error").firstChild.nodeValue = "This field is required.";
        isValid = false;
    } else {
        $("email_address1_error").firstChild.nodeValue = "";
    }

// validate the second email address and make sure that the text field matches emailaddress1
// and also makes sure there is text in the field

    if (emailAddress2 == "") {
        $("email_address2_error").firstChild.nodeValue = "This field is required.";
        isValid = false;
    } else if (emailAddress1 !== emailAddress2) {
        $("email_address2_error").firstChild.nodeValue = "This entry must equal first entry.";
        isValid = false;
    } else {
        $("email_address2_error").firstChild.nodeValue = "";
    }

    // validate the first name entry, testing for user input
    if ($("first_name").value == "") {
        $("first_name_error").firstChild.nodeValue = "This field is required.";
        isValid = false;
    }
    else {
        $("first_name_error").firstChild.nodeValue = "";
    }

    // validate the state code entry & testing for user input
    var stateCode = $("state_code").value;
    if (!stateCodeLookup(stateCode)) {
        $("state_code_error").firstChild.nodeValue = "State code is invalid.";
        isValid = false;
    }
    else {
        $("state_code_error").firstChild.nodeValue = "";
    }

    // submit the form if all entries are valid
    // the name/id of the form is 'email_form'

    if (isValid) {
        $("email_form").submit();
    }
}
/* Window load event handler to set focus on the email address field and the onclick event for the button in the form */
window.onload = function () {
    $("join_list").onclick = joinList;
    $("email_address1").focus();
}

    </script>
</head>
<body>
    <section>
        <h1>Please join our email list</h1>
        <form id="email_form" name="email_form" action="join.html" method="get">
	        <label for="email_address1">Email Address:</label>
	        <input type="text" id="email_address1" name="email_address1">
	        <span id="email_address1_error">*</span><br>

	        <label for="email_address2">Re-enter Email Address:</label>
	        <input type="text" id="email_address2" name="email_address2">
	        <span id="email_address2_error">*</span><br>

	        <label for="first_name">First Name:</label>
	        <input type="text" id="first_name" name="first_name">
	        <span id="first_name_error">*</span><br>

	        <label for="state_code">State Code:</label>
	        <input type="text" id="state_code" name="state_code">
	        <span id="state_code_error">*</span><br>

	        <label>&nbsp;</label>
	        <input type="button" id="join_list" value="Join our List">
	    </form>
    </section>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Join Email List</title>
	<!--From Murach's JavaScript and jQuery -->
	<!--http://murach.com/books/qury/index.htm -->

	<style type="text/css">
	/* type selectors */
	article, aside, figure, footer, header, nav, section {
	display: block;
	}
	body { font-family: Arial, Helvetica, sans-serif;background-color: white;margin: 0 auto;width: 650px;border: 3px solid blue;
	}
	h1 {
	color: blue;
	}
	section {
	padding: 0 2em 1em;
	}
	label {
	float: left;width: 11em;text-align: right;
	}
	input {
	margin-left: 1em;margin-bottom: .5em;
	}
	span {
	color: red;
	}

	</style>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<script type="text/javascript">
	var $ = function (id) {
	return document.getElementById(id);
	}
	/* state code lookup to verify states that gets it
	value from the user, only 9 included, but could be 50
	the function then converts the entry into Uppercase if the user enters lowercase.
	The for loop then compares the user entry with the array of states
	If the entry is equal to one of the 9 listed, then it returns true and the function ends
	Otherwise the for loop ends and returns false and the function ends */
	stateCodeLookup = function (stateCode) {
	var states = ["CA", "WA", "OR", "NV", "NM", "AZ", "WY", "MT", "UT"];
	stateCode = stateCode.toUpperCase();

	for (var i in states) {
	if (states[i] == stateCode) {
	return true;
	}
	}
	return false;
	}
	//this function gets the entries that user inputs from the form fields and stores them in the variables

	var joinList = function () {
	var emailAddress1 = $("email_address1").value;
	var emailAddress2 = $("email_address2").value;
	var isValid = true;

	// validate the first email address and make sure something is entered in the text fields
	if (emailAddress1 == "") {
	$("email_address1_error").firstChild.nodeValue = "This field is required.";
	isValid = false;
	} else {
	$("email_address1_error").firstChild.nodeValue = "";
	}

	// validate the second email address and make sure that the text field matches emailaddress1
	// and also makes sure there is text in the field

	if (emailAddress2 == "") {
	$("email_address2_error").firstChild.nodeValue = "This field is required.";
	isValid = false;
	} else if (emailAddress1 !== emailAddress2) {
	$("email_address2_error").firstChild.nodeValue = "This entry must equal first entry.";
	isValid = false;
	} else {
	$("email_address2_error").firstChild.nodeValue = "";
	}

	// validate the first name entry, testing for user input
	if ($("first_name").value == "") {
	$("first_name_error").firstChild.nodeValue = "This field is required.";
	isValid = false;
	}
	else {
	$("first_name_error").firstChild.nodeValue = "";
	}

	// validate the state code entry & testing for user input
	var stateCode = $("state_code").value;
	if (!stateCodeLookup(stateCode)) {
	$("state_code_error").firstChild.nodeValue = "State code is invalid.";
	isValid = false;
	}
	else {
	$("state_code_error").firstChild.nodeValue = "";
	}

	// submit the form if all entries are valid
	// the name/id of the form is 'email_form'

	if (isValid) {
	$("email_form").submit();
	}
	}
	/* Window load event handler to set focus on the email address field and the onclick event for the button in the form */
	window.onload = function () {
	$("join_list").onclick = joinList;
	$("email_address1").focus();
	}

	</script>
	</head>
	<body>
	<section>
	<h1>Please join our email list</h1>
	<form id="email_form" name="email_form" action="join.html" method="get">
	<label for="email_address1">Email Address:</label>
	<input type="text" id="email_address1" name="email_address1">
	<span id="email_address1_error">*</span><br>

	<label for="email_address2">Re-enter Email Address:</label>
	<input type="text" id="email_address2" name="email_address2">
	<span id="email_address2_error">*</span><br>

	<label for="first_name">First Name:</label>
	<input type="text" id="first_name" name="first_name">
	<span id="first_name_error">*</span><br>

	<label for="state_code">State Code:</label>
	<input type="text" id="state_code" name="state_code">
	<span id="state_code_error">*</span><br>

	<label> </label>
	<input type="button" id="join_list" value="Join our List">
	</form>
	</section>
	</body>
	</html>