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>