...

View Full Version : Simple Calculating Form using JavaScript



jovi
06-22-2012, 11:39 PM
I am trying to create a form that will allow the user to input a price and view a second amount that includes the shipping. If 25 or less, the shipping is 1.50. If 25 or more shipping is purchase price plus 10%. Nothing is happening when I submit a number. Are my variables wrong...how do I link the javaScript function to display in the form? I must use strict DTD


<!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 (purchaseprice, minimumfee, form)
{
var purchaseprice=parseFloat(purchasepricetext);
var minimumfee=1.5;
if (form.totalpurchasprice.value <= 25)
totalpurchaseprice=purchaseprice + minimumfee;

else
totalpurchaseprice=purchaseprice + [purchaseprice * 10 / 100]
}
/* ]]> */
</script>


</head>

<body>
<form action="">
<p>Please enter the Purchase Price: <input type="text" id="purchaseprice" /></p>
<p>Total Purchase Price including Shipping: <input type="text" id="totalpurchaseprice" /></p>
</form>
</body>
</html>

felgall
06-23-2012, 12:18 AM
You are not calling the function - plus you have a few typos in the function.

If you move the script to the bottom then you can use:


function calculateshipping (purchaseprice, totalpurchaseprice)
{
var minimumfee=1.5;
purchaseprice=+purchaseprice;
if (purchasprice <= 25)
totalpurchaseprice=purchaseprice + minimumfee;
else
totalpurchaseprice=purchaseprice * 1.1;
}
calculateshipping (
document.getElementById('purchaseprice').value,
document.getElementById('totalpurchaseprice').value);

jovi
06-23-2012, 02:05 AM
I'm really dying here...i've taken a different approach, and the button is now allowing me to submit the variable purchase price in the form. However, I do not get my document.write statement. It's as though nothing happens. I guess I do not fully understand how to call a function and have the results displayed in a seperate field on the form.


function calculateshipping(purchaseprice, totalpurchaseprice)
{

if (purchasprice <= 25)
totalpurchaseprice=purchaseprice + 1.5;
else
totalpurchaseprice=purchaseprice * 1.1;
}
/* ]]> */
</script>
</head>

<body>
<form action="" id="calcship">
<p>Please enter the Purchase Price: <input type="text" id="purchaseprice" /></p>
<p><button onclick="calculateshipping()">Calculate Shipping</button></p>
</form>
<script type="text/javascript">
document.write("your total including shipping is:" + totalpurchaseprice);
</script>

Old Pedant
06-23-2012, 02:12 AM
Look at your code:

You invoke the function via

<button onclick="calculateshipping()">

Yet the function *says* that it is expecting to receive TWO ARGUMENTS:


function calculateshipping(purchaseprice, totalpurchaseprice)

When you call the function and don't pass those arguments, they are just null and so of course nothing after that works as you expected.

Beyond that, your code is doomed to failure for other reasons.

You are doing document.write( ) to output the value of totalpurchaseprice, but that is happening WHEN THE PAGE IS BEING CREATED, long long before the user has entered a value and pushed the button.

And you can't solve the problem by moving the document.write inside the function, because if you use document.write after a page is loaded, it wipes out ALL CONTENT on the page, including even the JavaScript code that did the write.

And Felgall's answer was purposely incomplete because he didn't want to do your homework for you. I think you need to go back and reread a chapter or two.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum