PLEASE, REVIEW AND REVISE MY CODE (WEB PROGRAMMING) Part I HTML ( product_order.
ID: 668021 • Letter: P
Question
PLEASE, REVIEW AND REVISE MY CODE (WEB PROGRAMMING)
Part I HTML (product_order.html)
Revise product_order.html so that each of the form controls has an empty <span> tag associated with it. The <span> can be coded to the right of the control or below the control. The purpose of the span is to serve as a label or output area for error messages. Each <span> will need a unique ID value – use err1 – err10:
<input type="number" id="quantity"><span id="err2"></span>
<input type="number" id="unit_price"><span id="err3"></span>
Part II – JavaScript (product_order.js)
Revise the calcTotal() function so that it includes JavaScript Control Structures to perform user input validation. If the input is incorrect, use the document object’s getElementById() method to display an error message to the span tag associated with the form control (you may use HTML5 input validation if applicable). The output from the previous assignment should not be displayed in the ‘output’ division if any user input errors are detected:
Start by creating a Boolean flag variable that initially assumes all input is correct or valid. Reset the flag variable if an error is found:
var valid = true;
if (isNaN(quantity) || quantity < 1)
{
document.getElementById("err2").innerHTML = "Quantiry Must Be Numeric and Greater than 0.";
valid = false;
}
The above if statement checks to see if the value of quantity is a number greater than 0 using the isNaN() function and a comparison operator. If the variable is not a number or less than 1, an error message is written to the span tag associated with the loanAmount control and the flag variable is reset to false.
The following validation checks should be performed:
Product – cannot be empty
Quantity – must be numeric and greater than 0
Unit Price – must be numeric and greater than 0
Discount Rate – must be numeric and greater than 0
Date – cannot be empty and length must be between 8 and 10.
First Name – cannot be empty and length must be greater than 1
Last Name – cannot be empty and length must be greater than 1
Payment Type – cannot be empty
Card Number – must be a 16 digit integer number
Security code – must be a 3 digit number
The output should only be displayed if all input is correct (the following is pseudo-code, use correct syntax):
If (valid)
{
document.getElementById("output").innerHTML = Thank you, first_name last_name. Your order total is order_total.
}
Product_order.html below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>na - na</title>
<link href="style.css" rel="stylesheet" />
<script src="product_order.js" type="text/javascript"></script>
</head>
<meta charset="utf-8"/>
<body>
<h1>na - na</h1>
<form id="order_form">
<fieldset>
<legend>Buy a phone</legend>
<div class="tab">
<div class="tRow">
<div class="tCell"><label for="product">Product:</label></div>
<div class="tCell">
<select id="product">
<option>iPad</option>
<option>iPhone</option>
<option>Samsung Galaxy</option>
<option>Moto-X</option>
</select>
<span id="errl"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="quantity">Quantity:</label></div>
<div class="tCell">
<input type="number" id="quantity" />
<span id="err2"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="unit_price">Unit Price:</label></div>
<div class="tCell">
<input type="number" id="unit_price" />
<span id="err3"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="discount_rate">Discount Rate:
</label></div>
<div class="tCell">
<input type="number" id="discount_rate" />
<span id="err4"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="order_date">Order Date:</label></div>
<div class="tCell">
<input type="text" id="order_date" />
<span id="err5"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="first_name">First Name:</label></div>
<div class="tCell">
<input type="text" id="first_name" />
<span id="err6"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="last_name">Last Name:</label></div>
<div class="tCell">
<input type="text" id="last_name" />
<span id="err7"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="payment_type">Payment Type:</label></div>
<div class="tCell">
<select id="payment_type">
<option>Visa</option>
<option>MasterCard</option>
<option>American Express</option>
<option>Discover</option>
</select>
<span id="err8"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="card_number">Card Number:
</label></div>
<div class="tCell">
<input type="text" id="card_number" />
<span id="err9"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="security_code">Security Code:
</label></div>
<div class="tCell">
<input type="text" id="security_code" />
<span id="errl0"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"> </div>
<div class="tCell"><input type="button" id="order_button" value="Place Order" /></div>
</div><!-- END ROW -->
</div><!-- END TABLE -->
<br />
<div id="output"></div>
</fieldset>
</form>
</body>
</html>
product_order.js below:
function calcTotal() {
for (i=1; i<=10; i++) {
var myErr = document.getElementById("err" + i);
myErr.innerHTML ="";
}
document.getElementById("output").innerHTML ="";
// PULL IN FORM FILEDS
var product = document.getElementById("product").value;
var quantity = document.getElementById("quantity").value;
var unit_price = document.getElementById("unit_price").value;
var order_date = document.getElementById("order_date").value;
var first_name = document.getElementById("first_name").value;
var last_name = document.getElementById("last_name").value;
var payment_type = document.getElementById("payment_type").value;
var card_number = document.getElementById("card_number").value;
var security_code = document.getElementById("security_code").value;
var discount_rate = document.getElementById("discount_rate").value;
//DO YOU HAVE A FLAG
var valid = true;
if (product == "") {
valid = false;
document.getElementById("err1").innerHTML = "ERROR!!";
}
if (isNaN(quantity) || quantity < 1) {
valid = false;
document.getElementById("err2").innerHTML = "ERROR!!";
}
if (isNaN(unit_price) || unit_price <= 0) {
valid = false;
document.getElementById("err3").innerHTML = "ERROR!!";
}
if (isNaN(discount_rate) || discount_rate <= 0) {
valid = false;
document.getElementById("err4").innerHTML = "ERROR!!";
}
if (order_date == "" || order_date.length < 8 || order_date.length > 10) {
valid = false;
document.getElementById("err5").innerHTML = "ERROR!!";
}
if (first_name == "") {
valid = false;
document.getElementById("err6").innerHTML = "ERROR!!";
}
if (last_name == "") {
valid = false;
document.getElementById("err7").innerHTML = "ERROR!!";
}
if (payment_type == "") {
valid = false;
document.getElementById("err8").innerHTML = "ERROR!!";
}
if (isNaN(card_number) || card_number.length !== 16 ) {
valid = false;
document.getElementById("err9").innerHTML = "ERROR!!";
}
if (isNaN(security_code) || security_code.length !== 3 ) {
valid = false;
document.getElementById("err10").innerHTML = "ERROR!!";
}
if (valid) {
// ASSIGN OUTPUT
var discount_amount = unit_price * (discount_rate / 100);
var order_total = quantity * (unit_price - discount_amount);
var myOut = "Thank you for ordering, " + first_name + " ";
myOut += last_name + ". Your order total is $" + order_total +".";
document.getElementById("output").innerHTML = myOut;
} else {
document.getElementById("output").innerHTML = "";
}
}
function init()
{
var order_button = document.getElementById("order_button");
order_button.onclick= calcTotal;
// Add Error Class To Span
for (i=1; i<=10; i++) {
var myErr = document.getElementById("err" + i);
myErr.className = "error";
}
}
window.onload = init;
style.css below:
body { width: 90%; margin:0 auto; max-width:460px; }
.tab { display:table; width:100%; table-layout:fixed;}
.tRow { display:table-row; width: 100%; }
.tCell { display:table-cell; vertical-align;top; }
.tRow .tCell:nth-child(1) { width:35%; text-align:right; font-weight:bold; }
.tRow .tCell:nth-child(2) { width:64%; padding-left:1%;}
.error { font-weight:bold; color:red;}
Explanation / Answer
<HTML>
<HEAD>
<TITLE>product order Form</TITLE>
<SCRIPT>
//Global Variables
var RowsInForm = 10 //How many rows will be in the order details form
var ProductsInList = 36 //Must equal highest subscript in product list
var SalesTaxRate = 0.0775 //Set to sales tax rate in decimal. e.g. 0.0775 is 7.75%
var TaxableState = "USA" //Set to name of state you charge sales tax in
var ProdSubscript = 0 //Identifies subscript of selected product in current row.
// Function to create a new empty array that starts at 1.
function MakeArray(n)
{
this.length = n
for (var i = 1; i<= n; i++)
{
this[i] = 0
}
return this
}
// Function to create a new, empty array that starts at zero.
function BuildZeroArray(n)
{
this.length = n
for (var i = 0; i<= n; i++)
{
this[i] = 0
}
return this
}
// Define a custom object named prodobj (Product Object).
// An array of these objects will act as our product/price list.
function prodobj(name, unitprice)
{
this.name = name
this.unitprice = unitprice
}
// Define a new custom object named ordobj (Order Object).
// Will house real numbers from order form to help with math.
function ordobj(prodsub, qty, unitprice, extprice)
{
this.prodsub = prodsub
this.qty = qty
this.unitprice = unitprice
this.extprice = extprice
}
//convert any non-numeric value to a zero.
function strToZero(anyval)
{
anyval = ""+anyval
if (anyval.substring(0,1) < "0" || anyval.substring(0,1) > "9")
{
anyval = "0"
}
return eval(anyval)
}
//update current row in order array and form.
function updateRow(rownum)
{
var exec = 'ProdSubscript = document.ordform.prodchosen'+rownum+'.selectedIndex'
eval (exec)
ordData[rownum].prodsub=ProdSubscript //get qty from the form
var exec='tempqty=document.ordform.qty'+rownum+'.value'
eval (exec)
ordData[rownum].qty = strToZero(tempqty) //get unit price from the product price list.
ordData[rownum].unitprice=prodlist[ProdSubscript].unitprice
ordData[rownum].extprice = (ordData[rownum].qty) * ordData[rownum].unitprice
var exec = 'document.ordform.unitprice'+rownum+'.value = currencyPad(ordData['+rownum+'].unitprice,10)'
eval (exec)
var exec = 'document.ordform.extprice'+rownum+'.value = currencyPad(ordData['+rownum+'].extprice,10)'
eval (exec)
updateTotals() //update totals at bottom of form
}
//update the totals in the lower part of order details.
function updateTotals()
{
var subtotal = 0
for (var i=1; i<=RowsInForm; i++)
{
subtotal = subtotal + ordData[i].extprice
}
document.ordform.subtotal.value = currencyPad(subtotal,10)
salestax = 0
if (document.ordform.Taxable.checked)
{
salestax = SalesTaxRate * subtotal
}
document.ordform.salestax.value = currencyPad(salestax,10)
document.ordform.grandtotal.value = currencyPad(subtotal+salestax,10)
}
//copy the "Bill To" information to the "Ship To" information.
function copyAddress()
{
document.ordform.ShipName.value = document.ordform.billName.value
document.ordform.ShipCompany.value = document.ordform.billCompany.value
document.ordform.ShipAdd1.value = document.ordform.billAdd1.value
document.ordform.ShipAdd2.value = document.ordform.billAdd2.value
document.ordform.ShipCSZ.value = document.ordform.billCSZ.value
}
function currencyPad(anynum,width)
{
//returns number as string in $xxx,xxx.xx format.
anynum = "" + eval(anynum)
//evaluate (in case an expression sent)
intnum = parseInt(anynum)
//isolate integer portion
intstr = ""+intnum
//add comma in thousands place.
if (intnum >= 1000)
{
intlen = intstr.length
temp1=parseInt(""+(intnum/1000))
temp2=intstr.substring(intlen-3,intlen)
intstr = temp1+","+temp2
}
if (intnum >= 1000000)
{
intlen = intstr.length
temp1=parseInt(""+(intnum/1000000))
temp2=intstr.substring(intlen-7,intlen)
intstr = temp1+","+temp2
}
decnum = Math.abs(parseFloat(anynum)-parseInt(anynum)) //isolate decimal portion
decnum = decnum * 100 // multiply decimal portion by 100.
decstr = "" + Math.abs(Math.round(decnum))
while (decstr.length < 2)
{
decstr += "0"
}
retval = intstr + "." + decstr
if (intnum < 0)
{
retval=retval.substring(1,retval.length)
retval="("+retval+")"
}
retval = "$"+retval
while (retval.length < width)
{
retval=" "+retval
}
return retval
}
</SCRIPT>
</HEAD>
<BODY aLink=#8a8a8a bgColor=#ffffff
link=#ff0000 text=#000000 vLink=#215e21>
<H3 align=center><FONT color=#0000ff><FONT size=+1>'YOUR BUSINESS NAME' ORDER
FORM</FONT></FONT></H3>
<P>Pick a product from the drop-down list, then type in a quantity and click
another field, or press Tab. <BR>
<SCRIPT>
//Create a new array named prodlist with six elements.
prodlist = new BuildZeroArray(ProductsInList) //Refers to global variable ProductsInList
//Populate that array with this product info.
//The first item, prodlist[0] must be a "non-product" with
//a unitprice of zero.
prodlist[0] = new prodobj('-none-',0)
prodlist[1] = new prodobj('Anachronistic Widget',10.00)
prodlist[2] = new prodobj('Bombastic Gadget',10.50)
prodlist[3] = new prodobj('Cosmic Wingydingy',11.00)
prodlist[4] = new prodobj('Desultory Doodad',11.99
prodlist[5] = new prodobj('Ethereal Entity',12.00)
prodlist[6] = new prodobj('Fantastic Fingmabob',14.99)
prodlist[7] = new prodobj('Fantastic Fingmabob',14.99)
prodlist[8] = new prodobj('Humongous Humanoid',99.99)
prodlist[9] = new prodobj('Ignominious Innuendo',100.00)
prodlist[10] = new prodobj('Jumping Jehosafatz',250.00)
prodlist[11] = new prodobj('Jumping Jehosafatz',250.00)
prodlist[12] = new prodobj('Jumping Jehosafatz',250.00)
prodlist[13] = new prodobj('Jumping Jehosafatz',250.00)
prodlist[14] = new prodobj('Fantastic Fingmabob',14.99)
prodlist[15] = new prodobj('Jumping Jehosafatz',250.00)
prodlist[16] = new prodobj('Jumping Jehosafatz',250.00)
prodlist[17] = new prodobj('Jumping Jehosafatz',250.00)
prodlist[18] = new prodobj('Jumping Jehosafatz',250.00)
prodlist[19] = new prodobj('Jumping Jehosafatz',250.00)
prodlist[20] = new prodobj('Jumping Jehosafatz',250.00)
prodlist[21] = new prodobj('Fantastic Fingmabob',14.99)
prodlist[22] = new prodobj('Jumping Jehosafatz',250.00)
prodlist[23] = new prodobj('Jumping Jehosafatz',250.00)
prodlist[24] = new prodobj('Jumping Jehosafatz',250.00)
prodlist[25] = new prodobj('Jumping Jehosafatz',250.00)
prodlist[26] = new prodobj('Jumping Jehosafatz',250.00)
prodlist[27] = new prodobj('Jumping Jehosafatz',250.00)
prodlist[28] = new prodobj('Fantastic Fingmabob',14.99)
prodlist[29] = new prodobj('Jumping Jehosafatz',250.00)
prodlist[30] = new prodobj('Jumping Jehosafatz',250.00)
prodlist[31] = new prodobj('Jumping Jehosafatz',250.00)
prodlist[32] = new prodobj('Jumping Jehosafatz',250.00)
prodlist[33] = new prodobj('Jumping Jehosafatz',250.00)
prodlist[34] = new prodobj('Jumping Jehosafatz',250.00)
prodlist[35] = new prodobj('Fantastic Fingmabob',14.99)
prodlist[36] = new prodobj('Jumping Jehosafatz',250.00)
//Create a new array, named ordData, that contains empty Order Objects.
ordData = new MakeArray(RowsInForm)
for (var i=1; i<= RowsInForm; i++)
{
ordData[i] = new ordobj(0,0,0,0)}
</SCRIPT>
<! A real form would require METHOD = and ACTION= attributes in the FORM tag below ><! to ensure that the data gets sent somewhere. The contents of the tag would be something ><! like FORM name="ordform" METHOD="POST" ACTION="youremailaddress" where youremailaddress ><! really is your e-mail address. However, even that would work only if your ISP supports ><! the use of mailto: in a form tag. If in doubt, contact your ISP for specifics. >
<FORM name=ordform></P>
<CENTER>
<P><! Display the table header></P></CENTER>
<TABLE align=center border=1>
<CENTER>
<TBODY>
<TR>
<TH width=192>
<CENTER><B>Product</B></CENTER></TH>
<TH width=72>
<CENTER><B>Qty</B></CENTER></TH>
<TH width=120>
<CENTER><B>Unit Price</B></CENTER></TH>
<TH width=120>
<CENTER><B>Ext Price</B></CENTER></TH></TR><! Generate the rest of the rows using JavaScript><BR>
<SCRIPT>
for (var rownum = 1;rownum <= RowsInForm; rownum++)
{
document.write('<TR><TD WIDTH=192>')
document.write('<SELECT NAME="prodchosen'+rownum+'">')
for (i = 0; i <= ProductsInList; i++)
{
document.write ("<OPTION>"+prodlist[i].name)
}
document.write ('</SELECT>')
document.write ('</TD><TD WIDTH=72><CENTER><INPUT NAME="qty'+rownum+'" VALUE=""')
document.write ('MAXLENGTH="3" SIZE=3></CENTER>')
document.write ('</TD><TD WIDTH=120><CENTER>')
document.write ('<INPUT NAME="unitprice'+rownum+'" VALUE="" MAXLENGTH="10"')
document.write ('SIZE=10></CENTER>')
document.write ('</TD><TD WIDTH=120><CENTER>')
document.write ('<INPUT NAME="extprice'+rownum+'" VALUE="" MAXLENGTH="10"')
document.write ('SIZE=10></CENTER>')
document.write ('</TD></TR>')
}
</SCRIPT>
<P></P></CENTER></TBODY></TABLE>
<CENTER>
<P><! Second table holds subtotal, sales tax, grand total></P></CENTER>
<TABLE>
<TBODY>
<TR>
<TD width=264></TD>
<TD width=120>
<CENTER>
<P>Subtotal: </P></CENTER></TD>
<TD width=120>
<CENTER>
<P><INPUT maxLength=10 name=subtotal> size=10></P></CENTER></TD></TR>
<TR>
<TD width=264>
<P><INPUT name=Taxable type=checkbox value=true>
Click here if you live in the
<SCRIPT>
document.write(TaxableState)
</SCRIPT>
</P></TD>
<TD width=120>
<CENTER>
<P>Sales Tax:</P></CENTER></TD>
<TD width=120>
<CENTER>
<P><INPUT maxLength=10 name=salestax> size=10></P></CENTER></TD></TR>
<TR>
<TD width=264>
<P><FONT face=Arial><FONT size=-1>(more below)</FONT></FONT> </P></TD>
<TD width=120>
<CENTER>
<P>Grand Total: </P></CENTER></TD>
<TD width=120>
<CENTER>
<P><INPUT maxLength=10 name=grandtotal> size=10></P></CENTER></TD></TR></TBODY></TABLE>
<P><B>Bill To:</B> <! Onto Bill To and Ship To address portions of the form></P>
<TABLE align=center border=1>
<TBODY>
<TR>
<TD width=120>
<P>Name:</P></TD>
<TD width=408>
<P><INPUT maxLength=75 name=billName size=50></P></TD></TR>
<TR>
<TD width=120>
<P>Company:</P></TD>
<TD width=408>
<P><INPUT maxLength=75 name=billCompany size=50> </P></TD></TR>
<TR>
<TD width=120>
<P>Address1:</P></TD>
<TD width=408>
<P><INPUT maxLength=75 name=billAdd1 size=50></P></TD></TR>
<TR>
<TD width=120>
<P>Address2:</P></TD>
<TD width=408>
<P><INPUT maxLength=75 name=billAdd2 size=50> </P></TD></TR>
<TR>
<TD width=120>
<P>City, State, Zip:</P></TD>
<TD width=408>
<P><INPUT maxLength=75 name=billCSZ size=50></P></TD></TR>
<TR>
<TD width=120>
<P>Phone:</P></TD>
<TD width=408>
<P><INPUT maxLength=25 name=Phone size=25></P></TD></TR>
<TR>
<TD width=120>
<P>Email address:</P></TD>
<TD width=408>
<P><INPUT maxLength=75 name=email size=40></P></TD></TR></TBODY></TABLE>
<CENTER>
<P><INPUT type=button value="Copy 'Bill To' info to 'Ship To' blanks">
</P></CENTER>
<P><B>Ship To:</B> </P>
<TABLE align=center border=1>
<TBODY>
<TR>
<TD width=120>
<P>Name:</P></TD>
<TD width=408>
<P><INPUT maxLength=75 name=ShipName size=50></P></TD></TR>
<TR>
<TD width=120>
<P>Company:</P></TD>
<TD width=408>
<P><INPUT maxLength=75 name=ShipCompany size=50></P></TD></TR>
<TR>
<TD width=120>
<P>Address1:</P></TD>
<TD width=408>
<P><INPUT maxLength=75 name=ShipAdd1 size=50></P></TD></TR>
<TR>
<TD width=120>
<P>Address2:</P></TD>
<TD width=408>
<P><INPUT maxLength=75 name=ShipAdd2 size=50></P></TD></TR>
<TR>
<TD width=120>
<P>City, State, Zip:</P></TD>
<TD width=408>
<P><INPUT maxLength=75 name=ShipCSZ size=50></P></TD></TR></TBODY></TABLE>
<P><! In real life, you'd want to omit the whole onclick... thing in the input tag below. ><! Which is to say you want to get rid of... ><! ><INPUT type=submit value=Submit>
<INPUT type=reset value=Reset> <! In real life, you can omit the entire input tag (i.e. the entire line) below ><INPUT type=button value="All Done">
</FORM></P>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.