PDA

Click to See Complete Forum and Search --> : rounding to 2 decimal places

Alpha
07-10-2003, 04:21 AM
Hi all,

I am a total Javascript novice - i am trying to add an order form to my website that automatically calculates the subtotal of an order when the user inputs the quantity they want.

Here is an example of the function I am using to multiply:

function multiply(form)
{
form.subtotal_1.value = form.item1_quantity.value * 3.2;

The cost of item one is 3.20 . If the user inputs 2 as the item1_quantity.value the script returns 6.4 instead of 6.40. Or if they input 3, it returns 9.60000001 instead of 9.60.

How do I change this script to round to two decimal places that express currency numeracy?

Thanks a lot :D
Charles
07-10-2003, 05:13 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>
<style type="text/css">
<!--
label, button {display:block; margin:1ex}
input {margin-right:1em; width:5em}
-->
</style>
<script type="text/javascript">
<!--
String.prototype.reverse = function () {return this.split('').reverse().join('')};

function Dollars (d) {this.ammount = typeof d == 'number' ? d : Number(d.toString().replace(/[$,]/g, ''))};

Dollars.prototype.valueOf = function () {return this.ammount};

Dollars.prototype.toString = function () {
if (isNaN (this.ammount)) return NaN.toString();
var l = Math.floor(Math.abs(this.ammount)).toString();
var r = Math.round((Math.abs(this.ammount) % 1) * 100).toString();
return [(this.ammount < 0 ? '-' : ''), '$', (l.length > 4 ? l.reverse().match(/\d{1,3}/g).join(',').reverse() : l),'.', (r < 10 ? '0' + r : r)].join('');
}

function multiply (f) {
var v = new Dollars(f.item1_quantity.value);
f.subtotal_1.value = new Dollars(v * 3.2);
return false;
}
// -->
</script>
<form action="" onsubmit="return multiply(this)">
<div>
<label><input type="text" id="item1_quantity">Dollars</label>
<hr>
<label><input type="text" id="subtotal_1">Result</label>
<button type="submit">Calculate</button>
</div>
</form>
Alpha
07-10-2003, 05:44 AM
Thats superb, thanks a lot.

Is it difficult to modify to support multiple products? I have tried to incorporate your script into my form but can't figure out how to do it.

Also, rather than using a calculate button, can this script calculate automatically as the quantity is entered into the form?

Many Thanks
Charles
07-10-2003, 06:04 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>
<style type="text/css">
<!--
label, button {display:block; margin:1ex}
input {margin-right:1em; width:5em}
-->
</style>
<script type="text/javascript">
<!--
String.prototype.reverse = function () {return this.split('').reverse().join('')};

function Dollars (d) {this.ammount = typeof d == 'number' ? d : Number(d.toString().replace(/[$,]/g, ''))};

Dollars.prototype.valueOf = function () {return this.ammount};

Dollars.prototype.toString = function () {
if (isNaN (this.ammount)) return NaN.toString();
var l = Math.floor(Math.abs(this.ammount)).toString();
var r = Math.round((Math.abs(this.ammount) % 1) * 100).toString();
return [(this.ammount < 0 ? '-' : ''), '$', (l.length > 4 ? l.reverse().match(/\d{1,3}/g).join(',').reverse() : l),'.', (r < 10 ? '0' + r : r)].join('');
}
// -->
</script>
<form action="">
<div>
<label><input type="text" id="item1_quantity" onchange="this.form.subtotal_1.value = new Dollars(new Dollars(this.value) * 3.2)">Dollars</label>
<hr>
<label><input type="text" id="subtotal_1">Result</label>
</div>
</form>

All that's in the SCRIPT element simply creates a class of Dolars objects with some useful features.

1) The constructor scrubs out '$'s and ','s. That's why I start out using it with the value of form.item1_quantity . It's not necessary but it is a nice touch.

2) If you use a Dollars object as a number its value will be returned. THis is so that you can use it in arithmetic.

3) If you use it as a string then the value will be formatted the way I was taught: preceded by a dollar sign, commas where necessary and two digets after the decimal point.
Alpha
07-10-2003, 06:55 AM
Charles thats excellent - thank you so much.

Now I need to calculate the subtotal, add 17.5% tax and then the total. I need to calculate the tax for only two of the products.

I appreciate your help - don't spend too much time helping me - I'm sure you have more important things to do!

Thanks again.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>
<style type="text/css">
<!--
label, button {display:block; margin:1ex}
input {margin-right:1em; width:5em}
-->
</style>
<script type="text/javascript">
<!--
String.prototype.reverse = function () {return this.split('').reverse().join('')};

function Dollars (d) {this.ammount = typeof d == 'number' ? d : Number(d.toString().replace(/[$,]/g, ''))};

Dollars.prototype.valueOf = function () {return this.ammount};

Dollars.prototype.toString = function () {
if (isNaN (this.ammount)) return NaN.toString();
var l = Math.floor(Math.abs(this.ammount)).toString();
var r = Math.round((Math.abs(this.ammount) % 1) * 100).toString();
return [(this.ammount < 0 ? '-' : ''), '$', (l.length > 4 ? l.reverse().match(/\d{1,3}/g).join(',').reverse() : l),'.', (r < 10 ? '0' + r : r)].join('');
}
// -->
</script>
<form action="" onsubmit="return multiply(this)">
<table width="100%" border="0">
<tr>
<td colspan="2" align="center">Tax Rated</td>
</tr>
<tr>
<td><input type="text" id="item1_quantity" onchange="this.form.subtotal_1.value = new Dollars(new Dollars(this.value) * 3.2)">Dollars</td>
<td><input type="text" id="subtotal_1">Result</td>
</tr>
<tr>
<td><input type="text" id="item2_quantity" onchange="this.form.subtotal_2.value = new Dollars(new Dollars(this.value) * 3.6)">Dollars</td>
<td><input type="text" id="subtotal_2">Result</td>
</tr>
<tr>
<td colspan="2" align="center">Tax Zero Rated</td>
</tr>
<tr>
<td><input type="text" id="item3_quantity" onchange="this.form.subtotal_3.value = new Dollars(new Dollars(this.value) * 7.2)">Dollars</td>
<td><input type="text" id="subtotal_3">Result</td>
</tr>
<tr>
<td></td>
<td><input type="text" id="Subtotal">Subtotal</td>
</tr>
<tr>
<td></td>
<td><input type="text" id="Tax">Tax</td>
</tr>
<tr>
<td></td>
<td><input type="text" id="Total">Total</td>
</tr>
</table>
</form>
</body>
</html>