Create an online purchase order form for the U-Built-It Hardware Company. The st
ID: 3530139 • Letter: C
Question
Create an online purchase order form for the U-Built-It Hardware Company. The store offers only expensive high-quality hand tools that are made in Europe. These tools include planes, gouges, hammers, chisels, saws, and screwdrivers. Write a JavaScript program that collects the buyer's order and complete billing and shipping information. Use selection lists for the buyer to pick standard items. Include a checkbox that allows the user to say that the shipping address is the same as the billing address. Verify that all required fields are complete. Provide a submit button for the user to indicate they are done and a reset button to clear the form to allow them to try again. Use alerts to inform the user if information is missing and focus on the missing field for them to provide the needed data.Explanation / Answer
pls rate first, thanks
program as follow:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-s
trict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<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 addTool() {
if (document.forms[0].toolList.value == "")
window.alert("You must select a tool to add.");
else {
if (document.forms[0].customerList.options[0].value == "none")
document.forms[0].customerList.options[0] = null;
var newTool = new Option();
newTool.text = document.forms[0].toolList.value;
newTool.value =
document.forms[0].toolList.value;
nextItem = document.forms[0].customerList.length;
document.forms[0].customerList.options[nextItem]
= newTool;
document.forms[0].toolList.value = null;
}
}
function deleteTool() {
var selectedItem =
document.forms[0].customerList.selectedIndex;
if (selectedItem == -1)
window.alert("You must select a tool to delete.");
else
document.forms[0].customerList.options[selectedItem]
= null;
}
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].number.value == "") {
window.alert("You must enter your telephone number.");
return false;
}
for (var k=0; k<document.forms[0].customerList.length; ++k) {
document.forms[0].customerList.options[k].selected = true;
}
return true;
}
}
function confirmReset() {
var resetForm = window.confirm("Are you sure you want to reset the form?");
if (resetForm == true)
document.forms[0].customerList.options.length = 0;
return true;
return false;
}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>
</head>
<body>
<h1> U-Built-It Hardware Company Order Form</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="3" />
<input type="text" name="zip_billing" size="5" maxlength="5" /></p>
<p><input type="checkbox" />
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"/></p></td>
</tr>
</table>
<p>Telephone<br />
(<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>What would you like to order today?</p>
<p><select name="toolList" multiple="multiple">
<option value="Plane">Plane</option>
<option value="Gouge">Gouge</option>
<option value="Hammer">Hammer</option>
<option value="Chisel">Chisel</option>
<option value="Saw">Saw</option>
<option value="Screwdriver">Screwdriver</option>
</select></p>
<p><input type="button" value="Add Tool"
/>
<input type="button" value="Delete Tool"
/>
<input type="button" value="Clear List"
/></p>
<p><select name="customerList" multiple="multiple"
size="10">
<option value="none">The tools you wish to order will be added to this list</option>
</select></p>
<p><input type="submit" value="Subscribe" />
<input type="reset" /></p>
</form>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.