Topic: Beginner - Javascript Order Form
Hello!
I cannot figure out why my order form is not calculating subtotal, tax and total. Any help would be GREATLY appreciated!
Thank you!
-Sue
Here's the link to my web page:
http://web200labs.110mb.com/SueRaymond/Mod2/mod2.html
Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Order From Offbeat!</title>
<link rel="stylesheet" href="labs.css" type="text/css"/>
<script type="text/javascript">
function updateOrder() {
var TAXRATE = 0.07;
var STRINGPRICE = 16.99;
var numBassStrings =
parseStrings(document.getElementById("bass").value);
var numGuitarStrings =
parseStrings(document.getElementById("guitar").value);
if (isNaN(numBassStrings))
numBassStrings = 0;
if (isNan(numGuitarStrings))
numGuitarStrings = 0;
var subTotal = (numBassStrings + numGuitarStrings) *
STRINGPRICE;
var tax = subTotal * TAXRATE;
var total = subTotal + tax;
document.getElementById("subtotal").value = "$" +
subTotal.toFixed(2);
document.getElementById("tax").value = "$" + tax.toFixed(2);
document.getElementById("total").value = "$" +
total.toFixed(2);
}
function parseStrings(stringsString) {
numStrings = parseInt(stringsString);
if (stringString.indexOf("dozen") != -1)
numStrings *= 12;
return numStrings;
}
function placeOrder(form) {
if (document.getElementById("name").value=="")
alert ("I'm sorry. Please provide your name before submitting
your order.");
else if (document.getElementById("pickupdays").value==""||
isNaN(document.getElementById("pickupdays").value))
alert("I'm sorry. Please provide the number of days until
pick-up before submitting your order.");
else
//Submit the order to the server
form.submit();
}
</script>
</head>
<body>
<div id="container"><div id="topBanner">
<a href="index.html"><img src="images/logo.jpg" title="Home"
alt="Home" width="614" height="200" border="0" /></a></div>
<h3 align="center">"Where practice makes nearly
perfect"</h3></div>
<div id="leftcolumn">
<div class="nav">
<ul>
<li><a href="index.html">Home Page</a></li>
<li><a href="mod2dq.html">Mod 2 DQ</a></li>
<li><a href="mod2.html">Mod 2</a></li>
<li><a href="mod3.html">Mod 3</a></li>
<li><a href="mod4.html">Mod 4</a></li>
<li><a href="mod5.html">Mod 5</a></li>
<li><a href="mod6.html">Mod 6</a></li>
<li><a href="mod7.html">Mod 7</a></li>
<li><a href="mod8.html">Mod 8</a></li>
<li><a href="mod9.html">Mod 9</a></li>
<li><a href="mod10.html">Mod 10</a></li>
<li><a href="mod11.html">Mod 11</a></li>
<li><a href="mod12.html">Mod 12</a></li>
<li><a href="mod13.html">Mod 13</a></li>
<li><a href="mod14.html">Mod 14</a></li>
</ul><br /></div></div>
<div id="rightcolumn">
&
nbsp; &n
bsp; &nb
sp; <img id="offbeatlogo" src="images/offbeatlogo.gif"
alt="OffBeat Music Store" />
<p align = "center">More items being added regularly; check
back often. <br />Better yet, stop by the store!</p>
<p>We've got your strings!</p>
<img id="bassstrings" src="images/bass.jpg" alt="Bass
Strings" width="180" height="135" /><br />D'Addario Bass
Strings - package of 4<br /><br /><br />
<img id="guitarstrings" src="images/guitar.jpg" alt="Guitar
Strings" width="180" height="135" /><br /> Ernie Ball Guitar
Strings - package of 6<br /><br /><br />
<form name="orderform" action="offbeat.php" method="post">
<div class="field">
Name: <input type="text" id="name" name="name" value="" />
</div>
<div class="field">
# of packages of Bass Strings: <input type = "text" id="bass"
name = "numBassStrings" value = "" onchange="updateOrder();"
/>
</div>
<div class="field">
# of packages of Guitar Strings: <input type = "text"
id="guitar" name = "numGuitarStrings" value = ""
onchange="updateOrder();" />
</div>
<div class="field">
Days until pick-up: <input type = "text" id="pickupdays"
name="pickupdays" value="" /></div>
<div class="field">
Subtotal: <input type = "text" id="subtotal" name="subtotal"
value="" readonly="readonly" /></div>
<div class="field">
Tax: <input type = "text" id="tax" name="tax" value=""
readonly="readonly" /></div>
<div class="field">
Total: <input type = "text" id="total" name="total" value=""
readonly="readonly" /></div>
<div class="field">
<input type= "button" value="Place Order"
onclick="placeOrder(this.form);"/>
</div>
</form>
</div>
<div id="footer" align="center">
<a href="index.html" title="Home">Home</a>
<a href="mod2dq.html" title="Mod 2 DQ">Mod 2 DQ</a>
<a href="mod2.html" title="Mod 2">Mod 2</a>
<a href="mod3.html" title="Mod 3">Mod 3</a>
<a href="mod4.html" title="Mod 4">Mod 4</a>
<a href="mod5.html" title="Mod 5">Mod 5</a>
<a href="mod6.html" title="Mod 6">Mod 6</a>
<a href="mod7.html" title="Mod 7">Mod 7</a>
<a href="mod8.html" title="Mod 8">Mod 8</a>
<a href="mod9.html" title="Mod 9">Mod 9</a>
<a href="mod10.html" title="Mod 10">Mod 10</a>
<a href="mod11.html" title="Mod 11">Mod 11</a>
<a href="mod12.html" title="Mod 12">Mod 12</a>
<a href="mod13.html" title="Mod 13">Mod 13</a>
<a href="mod14.html" title="Mod 14">Mod 14</a> <br
/><br />
<p align="center">Copyright © 2010 WEB 200 Labs
Last updated: February 2010<br />
<a href="mailto:SunnyOne99@hotmail.com">Sue Raymond
@SunnyOne99@hotmail.com</a></p>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
style="border:0"
src="http://www.w3.org/Icons/valid-xhtml10-blue"
alt="Valid XHTML 1.0 Transitional" height="31"
width="88" /></a>
<a
href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" /></a>
</p>
</div>
</body>
</html>
