Multiplying fields within a form

[zacthespack]

I am creating a order form (http://www.acehireltd.co.uk/orderform/) and using some java script to multiply the quantity field and the price per item field to then give the product total however for some reason the number in the product total comes out wrong.

e.g quantity = 54 price per item = 0.12 and then the total price comes out at 6.4799999999999995

 

the code used is:

<script type="text/javascript">
function totalprice()
{
a = document.form1.PricePerItem1.value
b = document.form1.Quantity1.value

c = a * b

document.form1.Producttotal1.value = c
}
</script>

 

and the part of the order form:

<p><span class="style7"><span class="style5">Code</span>*</span><span class="style7">
	       <input name="code1" id="code1" type="text" size="6" maxlength="6"  />
	       <span class="style5">Description</span><span class="style5">
	       <input name="Description1" type="text" size="30" maxlength="30" id="Description1" />
	       Quantity<span class="style7">*</span></span>               <input name="Quantity1" type="text" size="3" maxlength="3" onblur="totalprice();" />
                 <span class="style5">Price Per item £
                 <input name="PricePerItem1" id="PricePerItem1" type="text" size="6" maxlength="6"  />
               </span></span>Product Total £<span class="style5">
               <input name="Producttotal1" id="Producttotal1" type="text" size="6" maxlength="6"  />
               </span></p>

[joe92]

Not entirely sure what you are doing with document.form1, I haven't seen this used before? However, if you alter your html tag's to both have id's (your quantity tag doesn't have an id, just a name), one being PricePerItem1 and the other Quatity1 then you could do the following:

 

function totalprice()
{
var a = document.getElementById('PricePerItem1').value
var b = document.getElementById('Quantity1').value

document.getElementById('Producttotal1').value = a * b
}

[zacthespack]

Not entirely sure what you are doing with document.form1, I haven't seen this used before? However, if you alter your html tag's to both have id's (your quantity tag doesn't have an id, just a name), one being PricePerItem1 and the other Quatity1 then you could do the following:

 

function totalprice()
{
var a = document.getElementById('PricePerItem1').value
var b = document.getElementById('Quantity1').value

document.getElementById('Producttotal1').value = a * b
}

 

This still displays the same thing if I type in the test i did it still comes up with 6.4799999999999995 as the price, it dosnt seem to do it for all just that one, you can try it your self, use the hire code HB0001 (or just type H its the first code) and set the quantity to 54

[joe92]

Well this is interesting! Try this too, 81.66 as price, 15 as quantity...

 

I did a quick google search and it seems that javascript can get some simple mathmatics wrong. You will find this article interesting I think, and also relieving that your code is fine.

 

http://www.astonisher.com/archives/bugnet/alerts/bugalert9298.html

[zacthespack]

Well this is interesting! Try this too, 81.66 as price, 15 as quantity...

 

I did a quick google search and it seems that javascript can get some simple mathmatics wrong. You will find this article interesting I think, and also relieving that your code is fine.

 

http://www.astonisher.com/archives/bugnet/alerts/bugalert9298.html

 

Nice well its good to know that its not just me

Alright lets try this a different way can i make the java script round the number to only two decimal points?

[joe92]

http://www.javascriptkit.com/javatutors/round.shtml

 

Shows how to do it very well. It's just a case of algebra.

[zacthespack]

http://www.javascriptkit.com/javatutors/round.shtml

 

Shows how to do it very well. It's just a case of algebra.

 

ok great, I have it working, one last thing to be really picky if for example I have 10 of a item thats 0.12 it will show the cost at 1.2 is there a way to keep it standard currency and show 1.20.

My java now looks like this

<script type="text/javascript">
function totalprice1()
{
var a = document.getElementById('PricePerItem1').value
var b = document.getElementById('Quantity1').value
c = a * b
document.getElementById('Producttotal1').value = Math.round(c*100)/100
}
</script>

[joe92]

Google is your friend ... http://www.web-source.net/web_development/currency_formatting.htm

[zacthespack]

Google is your friend ... http://www.web-source.net/web_development/currency_formatting.htm

 

Thanks, i'm having trouble getting the code to work with my script, this is what I have so far

<script type="text/javascript">
function totalprice1()
{
var a = document.getElementById('PricePerItem1').value
var b = document.getElementById('Quantity1').value
c = a * b
document.getElementById('Producttotal1').value = result
var result = CurrencyFormatted(number);
}
function CurrencyFormatted(amount)
{
var i = parseFloat(c);
if(isNaN(i)) { i = 0.00; }
var minus = '';
if(i < 0) { minus = '-'; }
i = Math.abs(i);
i = parseInt((i + .005) * 100);
i = i / 100;
s = new String(i);
if(s.indexOf('.') < 0) { s += '.00'; }
if(s.indexOf('.') == (s.length - 2)) { s += '0'; }
s = minus + s;
return s;
}
</script>

But when I try it I get 'undefined' in the total box

[joe92]

Well that would be because you have told it to do CurrencyFormatted(number)... your sending a string, 'number', to the formatter. You need to send variable c. Secondly, you have said that 'Producttotal1'.value equals result, but declared the variable result on the next line. Hence, the variable result is undefined at the point when you are sending it back to the page. Change it to this:

 

<script type="text/javascript">
function CurrencyFormatted(amount)
{
var i = parseFloat(amount);
if(isNaN(i)) { i = 0.00; }
var minus = '';
if(i < 0) { minus = '-'; }
i = Math.abs(i);
i = parseInt((i + .005) * 100);
i = i / 100;
s = new String(i);
if(s.indexOf('.') < 0) { s += '.00'; }
if(s.indexOf('.') == (s.length - 2)) { s += '0'; }
s = minus + s;
return s;
}
function totalprice1()
{
var a = document.getElementById('PricePerItem1').value
var b = document.getElementById('Quantity1').value
var c = a * b
var result = CurrencyFormatted(c);
document.getElementById('Producttotal1').value = result
}
</script>

 

As you are calling the function CurrencyFormatted in the function totalprice1, it is good practice to write the former first in the script. It will work now.

 

Hope this helps,

Joe

[zacthespack]

Well that would be because you have told it to do CurrencyFormatted(number)... your sending a string, 'number', to the formatter. You need to send variable c. Secondly, you have said that 'Producttotal1'.value equals result, but declared the variable result on the next line. Hence, the variable result is undefined at the point when you are sending it back to the page. Change it to this:

 

<script type="text/javascript">
function CurrencyFormatted(amount)
{
var i = parseFloat(amount);
if(isNaN(i)) { i = 0.00; }
var minus = '';
if(i < 0) { minus = '-'; }
i = Math.abs(i);
i = parseInt((i + .005) * 100);
i = i / 100;
s = new String(i);
if(s.indexOf('.') < 0) { s += '.00'; }
if(s.indexOf('.') == (s.length - 2)) { s += '0'; }
s = minus + s;
return s;
}
function totalprice1()
{
var a = document.getElementById('PricePerItem1').value
var b = document.getElementById('Quantity1').value
var c = a * b
var result = CurrencyFormatted(c);
document.getElementById('Producttotal1').value = result
}
</script>

 

As you are calling the function CurrencyFormatted in the function totalprice1, it is good practice to write the former first in the script. It will work now.

 

Hope this helps,

Joe

 

Thank you very much all is working now, you have been a great help!