Another Form Validation Question

twilitegxa · November 8, 2008

Again, here is the full working script:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gosselin Gazette Subscription Form</title>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="js_styles.css" type="text/css" />
<script type="text/javascript">
/*<![CDATA[ */
function checkForNumber(fieldValue) {
var numberCheck = isNaN(fieldValue);
if (numberCheck == true) {
	window.alert("You must enter a numeric value!");
	return false;
}
}

function confirmPassword() {
if (document.forms[0].password_confirm.value
	!= document.forms[0].password.value) {
	window.alert("You did not enter the same password!");
document.forms[0].password.focus();
}
}

function noDelivery() {
for (var i=0;i<document.forms[0].delivery.length;++i) {
	if (document.forms[0].delivery[i].checked == true)
		document.forms[0].delivery[i].checked = false;
}
}
function noSunday() {
for(var i=0;i<document.forms[0].sunday.length;++i) {
	if (document.forms[0].sunday[i].checked == true)
		document.forms[0].sunday[i].checked = false;
}
}

function sameShippingInfo() {
if (document.forms[0].elements[5].checked == true) {
	document.forms[0].name_shipping.value
		= document.forms[0].name_billing.value;
	document.forms[0].address_shipping.value
		= document.forms[0].address_billing.value;
	document.forms[0].city_shipping.value
		= document.forms[0].city_billing.value;
	document.forms[0].state_shipping.value
		= document.forms[0].state_billing.value;
	document.forms[0].zip_shipping.value
		= document.forms[0].zip_billing.value;
}
else {
	document.forms[0].name_shipping.value = "";
	document.forms[0].address_shipping.value = "";
	document.forms[0].city_shipping.value = "";
	document.forms[0].state_shipping.value = "";
	document.forms[0].zip_shipping.value = "";
}
}

function addMagazine() {
if (document.forms[0].magazines.options[0]
        && (document.forms[0].magazines.options[0].value == "none"))
                document.forms[0].magazines.options[0] = null;

   if (document.forms[0].elements[31].value == "")
      window.alert("You must enter a magazine name.");
   else {
	var magazine = new Option();
	magazine.text = document.forms[0].elements[31].value;
	magazine.value = document.forms[0]
		.elements[31].value;
	nextItem = document.forms[0].magazines.length;
	document.forms[0].magazines.options[nextItem]
		= magazine;
	document.forms[0].elements[31].value = "";
}
}
function deleteMagazine() {
var selectedItem = 
	document.forms[0].magazines.selectedIndex;
if (selectedItem == -1)
	window.alert(
		"You must select a magazine name in the list.");
else
	document.forms[0].magazines.remove(selectedItem);
}

/*]]> */
</script>
</head>

<body>
<h1>Gosselin Gazette Subscription Form</h1>
<h2>Customer Information</h2>
<form action="FormProcessor.html" method="get"
enctype="application/x-www-form-urlencoded">
<table border="0">
<tr>
<td valign="top"><h3>Billing Information</h3>
<p>Name<br />
<input type="text" name="name_billing" size="50" /></p>
<p>Address<br />
<input type="text" name="address_billing" size="50" /></p>
<p>City, State, Zip<br />
<input type="text" name="city_billing" size="34" />
<input type="text" name="state_billing" size="2" maxlength="2" />
<input type="text" name="zip_billing" size="10"
maxlength="10" onchange="return checkForNumber(this.value);" /></p>
<p><input type="checkbox" onclick="sameShippingInfo();" />
Same shipping information</p></td>
<td valign="top">
<h3>Shipping Information</h3>
<p>Name<br />
<input type="text" name="name_shipping" size="50" /></p>
<p>Address<br />
<input type="text" name="address_shipping" size="50" /></p>
<p>City, State, Zip<br />
<input type="text" name="city_shipping" size="34" />
<input type="text" name="state_shipping" size="2"
maxlength="2" />
<input type="text" name="zip_shipping" size="10"
maxlength="5" onchange="return checkForNumber(this.value);" /></p></td></tr>
</table>
<p>Telephone</p>
<p>(<input type="text" name="area" size="3" maxlength="3" />)
<input type="text" name="exchange" size="3" maxlength="3" />
<input type="text" name="phone" size="4" maxlength="4" /></p>
<p>Enter a password that you can use to manage your subscription online:</p>
<p><input type="password" name="password" size="50" /></p>
<p>Type the password again to confirm it.</p>
<p><input type="password" name="password_confirm" size="50"
onblur="confirmPassword();" /></p>
<h3>Delivery Rates</h3>
<table border="0">
<colgroup align="left" width="150" />
<colgroup span="4" align="center" width="130" />
<tr><th> </th>
<th>4 weeks</th>
<th>13 weeks</th>
<th>26 weeks</th>
<th>52 weeks</th></tr>
<tr><td><strong>Mon-Sat</strong></td>
<td><input type="radio" name="delivery"
value="12.60" onclick="noSunday();" />$12.60</td>
<td><input type="radio" name="delivery"
value="40.95" onclick="noSunday();" />$40.95</td>
<td><input type="radio" name="delivery"
value="81.90" onclick="noSunday();" />$81.90</td>
<td><input type="radio" name="delivery"
value="156.00" onclick="noSunday();" />$156.00</td></tr>
<tr><td><strong>Every Day</strong></td>
<td><input type="radio" name="delivery"
value="13.56" onclick="noSunday();" />$13.56</td>
<td><input type="radio" name="delivery"
value="44.07" onclick="noSunday();" />$44.07</td>
<td><input type="radio" name="delivery"
value="88.14" onclick="noSunday();" />$88.14</td>
<td><input type="radio" name="delivery"
value="159.74" onclick="noSunday();" />$159.74</td></tr>
</table>
<p><strong>Sundays only ($3.50 per week)</strong>
<input type="radio" name="sunday" value="weekly"
onclick="noDelivery();" />Bill me weekly
<input type="radio" name="sunday" value="weekly"
onclick="noDelivery();" />Bill me monthly</p>
<p>Do you subscribe to any other newspapers?</p>
<p><input type="checkbox" name="newspapers"
value="nytimes" />New York Times<br />
<input type="checkbox" name="newspapers"
value="bostonglobe" />Boston Globe<br />
<input type="checkbox" name="newspapers"
value="sfchronicle" />San Francisco Chronicle<br />
<input type="checkbox" name="newspapers"
value="miamiherald" />Miami Herald<br />
<input type="checkbox" name="newspapers"
value="other" />Other</p>
<p>Do you subscribe to any magazines?</p>
<p>Magazine <input type="text" size="68" /></p>
<p><input type="button" value="Add Magazine"
onclick="addMagazine();" style="width: 120px" />
<input type="button" value="Delete Magazine"
onclick="deleteMagazine()" style="width: 120px" />
<input type="button" value="Clear List"
onclick="document.forms[0].magazines.options.length = 0;"
style="width: 120px" />
<input type="button" value="Change Magazine"
onclick="changeMagazine()" style="width: 120px" /></p>
<p><select name="magazines" multiple="multiple"
size="10" style="width: 500px">
<option value="none">Enter the magazine you subscribe 
to</option>
</select></p>
<p><input type="image" alt="Graphical image of a subscribe
button" src="subscribe.gif" /></p>
<p><input type="reset" /></p>
</form>
</body>
</html>

The directions say:

Add the following changeMagazine() function to the end of the script section. The function is very familiar to the changeItem() function you saw earlier in the shopping list form.

function changeMagazine() {
var selectedItem = 
	document.forms[0].magazines.selectedIndex;
	if (selectedItem == -1)
		window.alert("You must select a magazine
			name in the list.");
	else {
		document.forms[0].magazines.options[selectedItem]
			.value = document.forms[0].elements[31].value;
		document.forms[0]. magazines.options[selectedItem]
			.text = document.forms[0].elements[31].value;
	}
}

What am I doing wrong now? The only problem I say was the space between document.forms[0]. magazines, but taking the space out didn't fix the problem, so any other suggestions?

BoltZ · November 8, 2008

I have been reading your various posts on these forms and I have some questions

1. what site url is this

2. Where are you getting these "instructions"

3. What is this for?

twilitegxa · November 8, 2008

I don't have this code on a site because I'm currently working with a tutorial in a book, but I can easily upload it to my server if needed to view the page. It is from a tutorial in a book named JavaScript: Fourth Edition by Don Gosselin (from the Thomson Learning Technology group of books) and I am going through the tutorial to learn how to do the various JavaScript codes inside the book because I want to learn them, but some of the code either isn't right in the book, or I keep typing things wrong (which is probably the case). So I post them up here to see if anyone can spot where I'm having the problem, since I'm missing it myself.

twilitegxa · November 10, 2008

Bump.

BoltZ · November 11, 2008

Usually the books for web development have a site where you can download the source code for the chapter projects. Check out the beginning of the book to see if there is one

Sign In

Another Form Validation Question

Recommended Posts

twilitegxa

Link to comment

Share on other sites

BoltZ

Link to comment

Share on other sites

twilitegxa

Link to comment

Share on other sites

twilitegxa

Link to comment

Share on other sites

BoltZ

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information