Dunamic CF Form Calculations

Get Started
1

I came across the code below on this site which is working fine, but when I use decimal points, the calculations are wrong.

Exp: if Field-1=10 and Field-2=5 , then Field-3=15 - good so far.
but when I change 10 to 10.5, I still get 15 rather than 15.5

Here is the code


<script language="JavaScript">
var one=0;
var two=0;
var three=0;
var four=0;
var five=0;

function myCalc() {


one=Math.abs(parseInt(document.FORM.one.value));
two=Math.abs(parseInt(document.FORM.two.value));
three=Math.abs(parseInt(document.FORM.three.value));
four=Math.abs(parseInt(document.FORM.four.value));
five=Math.abs(parseInt(document.FORM.five.value));

document.FORM.four.value=(one+two);
document.FORM.five.value=(three+four);

}
</script>


<cfform action="acceptValues.cfm" name="FORM" method="get">
<table width="45%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="39%">one</td>
<td width="61%"><cfinput type="text" name="one" onBlur="myCalc()" size="12" maxlength="50"></td>
</tr>
<tr>
<td>two</td>
<td><cfinput type="text" name="two" onBlur="myCalc()" size="12" maxlength="50"></td>
</tr>
<tr>
<td>three</td>
<td><cfinput type="text" name="three" onBlur="myCalc()" size="12" maxlength="50"></td>
</tr>
<tr>
<td>four</td>
<td align="right"><cfinput type="text" name="four" size="12" maxlength="50"></td>
</tr>
<tr>
<td>Total(five)</td>
<td align="right"><cfinput type="text" name="five" size="12" maxlength="50"></td>
</tr>
<tr>
<td><input name="Save" type="button" value="Submit" /></td>
<td>&nbsp;</td>
</tr>
</table>

</cfform>

Here is the direct link

Thank you.

2

Thank you so much Jake for your prompt response. Yes, you suggestion worked great!

Thanks again!

3

That’s because you’re parsing the inputs as integers; Integers, by definition, cannot have a decimal point (because they are whole numbers).

The Float datatype handles decimals.

Therefore, by replacing parseInt with parseFloat, it should be fine.