Simple Calculating Form using JavaScript [Archive]

jovi

06-24-2012, 05:55 PM

I am very new to JavaScript, and this is my first attemp at creating a shipping calculator. The doctype must be XHTM Strict, so I am using id= in the form fields rather than name. However, my alert box will not pop up unless i change it to transitional and change the id to name....i am going nuts trying to figure this out. Any help would be greatly appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calculate Shipping</title>

<script type="text/javascript">
/* <![CDATA[ */
function calculateshipping()
{
var salesprice = parseFloat(document.calcship.price.value);
var salestotal = salesprice;

if (salesprice <= 25)
salestotal += 1.5;

else
salestotal += salesprice * 1.1;
window.alert("Your total cost including shipping is $" + salestotal);
}
/* ]]> */
</script>

</head>

<body>
<h1>Calculate Shipping and Handling</h1>
<form action="" id="calcship">
<p>Please enter the Purchase Price: <input type="text" id="price" /></p>
<p><input type="button" value="Calculate Shipping and Handling" onclick="calculateshipping()" /></p>
</form>
</body>
</html>

Philip M

06-24-2012, 06:41 PM

It is the form itself where the name attribute is deprecated. Form elements may and should be addressed by name.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calculate Shipping</title>

<script type="text/javascript">
/* <![CDATA[ */
function calculateshipping() {
var salesprice = parseFloat(document.forms[0].price.value);
var salestotal = salesprice;

if (salesprice <= 25) {
salestotal += 1.5;
}

else {
salestotal = (salesprice * 1.1).toFixed(2);
window.alert("Your total cost including shipping is $" + salestotal);
}
}
/* ]]> */
</script>

</head>

<body>
<h1>Calculate Shipping and Handling</h1>
<form action="" id="calcship">
<p>Please enter the Purchase Price: <input type="text" name = "price" id="price" /></p>
<p><input type="button" value="Calculate Shipping and Handling" onclick="calculateshipping()" /></p>
</form>
</body>
</html>

Or pass the id of the form to the script with
<p><input type="button" value="Calculate Shipping and Handling" onclick="calculateshipping(this.form)" /></p>
and in the script
function calculateshipping(frm) {
var salesprice = frm.price.value;

Some tips: alert() is quite obsolete aand useful only for debugging - you should use DOM methods such as innerHTML to display the result.

It is recommended that the opening brace { is placed on the same line as the function, if, else, do, while, or for statement and not on the following line. This is because of something known as automatic semi-colon insertion. If you disregard this advice it is looking out and one day it will rise up and bite you in the undercarriage, and create an error which can be hard to find.

BTW, when posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.

"Copy from one book, it’s called plagiarism; copy from three, it’s called research." -- Wilson Mizner (1876-1933)