0

This is my second to last assignment and then I'm done! Ok, below is the code for a simple "purchase form". I'm a bit stuck so here are my problems.

1. When I click "Purchase" and then "OK" on the dialog box, if a field is empty it will let me know which field but then still submit the page.

2. When I click "Purchase" and then "Cancel" it still submits.

3. When I click "Reset" and then "cancel" it still resets.

4. I need it to focus on a field if it is missing something when I click submit. The only focus that I can find is for when a pop up appears so that it will "pop up" in front and not be hidden behind the current screen.

Below is the code....

Thanks for the help as I'm getting a headache. Possibly due to lack of sleep..

Jake

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>U-Built-It Hardware Company</title>
<style type="text/css">
body {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif, serif }
h2 { font-size: 1.2em }
</style>

<script type="text/javascript">
<!--HIDE FROM INCOMPATIBLE BROWSERS

function checkForNumber(fieldValue) {
	var numberCheck = isNaN(fieldValue);
	if (numberCheck == true) {
		window.alert("You must enter a numeric value!");
		return 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 confirmSubmit() {
	var submitForm = window.confirm("Are you sure you want to submit the form?");
		if (submitForm == true)
			
	
	if (document.forms[0].name_billing.value == ""
		|| document.forms[0].address_billing.value == ""
		|| document.forms[0].city_billing.value == ""
		|| document.forms[0].state_billing.value == ""
		|| document.forms[0].zip_billing.value == "") 
	{
	window.alert("You must enter your billing information.");
	return false;
	}
	
	else if (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 == "")
	{
	window.alert("You must enter your shipping information.");
	return false;
	}
	
	else if (document.forms[0].area.value == ""
		|| document.forms[0].exchange.value == ""
		|| document.forms[0].phone.value == "") 
	{
	window.alert("You must enter your telephone number.");
	return false;
	}
	else if (document.forms[0].tools.selectedIndex == -1) {
		window.alert("You must select at least one tool type.");
	}
	
	return true;
}

function confirmReset() {
	var resetForm = window.confirm("Are you sure you want to reset the form?");
		if (resetForm == true)
			return true;
		return false;
	}

// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>
</head>
<body>
<h1>U-Built-It Hardware Company</h1>
<h2>Customer Information</h2><hr />

<form action="FormProcessor.html" method="get"
enctype="application/x-www-form-urlencoded"
>

<table border="0" cellpadding="3" cellspacing="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="5" maxlength="5" 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="5" maxlength="5" onchange="return checkForNumber(this.value);"/></p>
</td>

</tr>
</table>
<p>Telephone<br />
(<input type="text" name="area" size="3" maxlength="3" onchange="return checkForNumber(this.value);"/>) 
<input type="text" name="exchange" size="3" maxlength="3" onchange="return checkForNumber(this.value);"/>
<input type="text" name="phone" size "4" maxlength="4" onchange="return checkForNumber(this.value);"/></p>

<p>Please select at least one tool group that you would like to purchase.</p>
<p>
<select name="tools" multiple="multiple" size="6">
<option value="planes">Planes</option>
<option value="gouges">Gouges</option>
<option value="hammers">Hammers</option>
<option value="chisels">Chisels</option>
<option value="saws">Saws</option>
<option value="screwdrivers">Screwdrivers</option>
</select></p>

<p>
<input type="submit" value="Purchase" onclick="confirmSubmit();" />
<input type="reset" value="Reset Fields"onclick="confirmReset();"/>
</p>

</form>
</body>
</html>
2
Contributors
4
Replies
5
Views
6 Years
Discussion Span
Last Post by djcrab
0

The confirmSubmit function should return false if submitForm == false. Check your logic so it does. Your functions should return false if you do not want to submit/reset, or true if you do.

0

Thanks for your help pritaeas! I think I implemented it correctly.

Need more help please. :-)
I can not figure out how to get the telephone number validation to work when submitting. Even if there are numbers plugged in it will say to input my telephone number. If I remove that part of the validation it seems to work fine.

Second thing I don't know how to do is if I forget to input information my assignment wants me to "Use alerts to inform the user if information is missing and focus on the missing field for them to provide the needed date." --How do I focus on the fields? I could only find in my book where to focus on windows that were previously opened with javascript already.

Below is the newest code. Thanks.

Jake

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>U-Built-It Hardware Company</title>
<style type="text/css">
body {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif, serif }
h2 { font-size: 1.2em }
</style>

<script type="text/javascript">
<!--HIDE FROM INCOMPATIBLE BROWSERS

function checkForNumber(fieldValue) {
	var numberCheck = isNaN(fieldValue);
	if (numberCheck == true) {
		window.alert("You must enter a numeric value!");
		return 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 confirmSubmit() {
	var submitForm = window.confirm("Are you sure you want to submit the form?");
		if (submitForm == false)
			return false;
		

	
	if (document.forms[0].name_billing.value == ""
		|| document.forms[0].address_billing.value == ""
		|| document.forms[0].city_billing.value == ""
		|| document.forms[0].state_billing.value == ""
		|| document.forms[0].zip_billing.value == "") 
	{
	window.alert("You must enter your billing information.");
	return false;
	}
	
	else if (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 == "")
	{
	window.alert("You must enter your shipping information.");
	return false;
	}
	
	else if (document.forms[0].area.value == ""
		|| document.forms[0].exchange.value == ""
		|| document.forms[0].phone.value == ""); 
	{
	window.alert("You must enter your telephone number.");
	return false;
	}
	
	if (document.forms[0].tools.selectedIndex == -1) {
		window.alert("You must select at least one tool type.");
		return false;
	}
		return true;
}

function confirmReset() {
	var resetForm = window.confirm("Are you sure you want to reset the form?");
		if (resetForm == true)
			return true;
		return false;
	}

// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>
</head>
<body>
<h1>U-Built-It Hardware Company</h1>
<h2>Customer Information</h2><hr />

<form action="FormProcessor.html" method="get"
enctype="application/x-www-form-urlencoded"
onsubmit="return confirmSubmit();"
onreset="return confirmReset();" >

<table border="0" cellpadding="3" cellspacing="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="5" maxlength="5" 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="5" maxlength="5" onchange="return checkForNumber(this.value);"/></p>
</td>

</tr>
</table>
<p>Telephone<br />
(<input type="text" name="area" size="3" maxlength="3" onchange="return checkForNumber(this.value);"/>) 
<input type="text" name="exchange" size="3" maxlength="3" onchange="return checkForNumber(this.value);"/>
<input type="text" name="phone" size "4" maxlength="4" onchange="return checkForNumber(this.value);"/></p>

<p>Please select the items below that you would like to purchase.</p>
<p>
<select name="tools" multiple="multiple" size="6">
<option value="planes">Planes</option>
<option value="gouges">Gouges</option>
<option value="hammers">Hammers</option>
<option value="chisels">Chisels</option>
<option value="saws">Saws</option>
<option value="screwdrivers">Screwdrivers</option>
</select></p>

<p>
<input type="submit" value="Purchase"  />
<input type="reset" value="Reset Fields" />
</p>

</form>
</body>
</html>
0

1. Your telephone check checks three fields. If one of them is empty, you will get the message.

2. You can use the focus() function, to focus an input field. E.g,

document.forms[0].address_billing.focus();
0

Found out the problem with the telephone field. I had a semi-colon at the end of that if statement before the window.alert.

Thank you for the focus(). Got it working!

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.