Javascript Calculator

**RFH Reseller: Shiven Rabadia** · 18th November 2006, 02:05 PM

Hi all,

Wondered if a JS expert could give me a hand...
I'm in need of a simple javascript calculator tool... all I need it to do is add up about 20 user inputed fields (HTML form) to give a total. It would something along the lines of:- car expense: [input], shopping expense: [input], etc. total spent:[displayed in input box].

Did a search in google and script directories... but kept getting all sorts, overkill scripts. I'm sure it's real simple to do, but appreciate the help.

Thanks

Shiv

**RFH Reseller: Sol** · 18th November 2006, 02:51 PM

This should be easy. Simply get the form fields into variables, then just add the values together:

Code:

var amt1 = document.getElementById("Amount1").value;
var amt2 = document.getElementById("Amount2").value;
var amt3 = document.getElementById("Amount3").value;
var amt4 = document.getElementById("Amount4").value;
 
//-- Either hidden field for postback, or other form field for display
var Total = document.getElementById("Total");
Total = amt1 + amt2 + amt3 + amt4;

You could use a loop to retrieve form values and add them to the Total but how you do that would depend on what other fields may be present.

**Staff: Warren Ashcroft** · 18th November 2006, 04:21 PM

Using Suneels exmaple:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Document</TITLE>
<SCRIPT type="text/javascript">
<!--
function calculate(){
 var field1 = parseFloat(document.getElementById("field1").value);
 var field2 = parseFloat(document.getElementById("field2").value);
 var field3 = parseFloat(document.getElementById("field3").value);
 var field4 = parseFloat(document.getElementById("field4").value);
 var field5 = parseFloat(document.getElementById("field5").value);
 var total = field1 + field2 + field3 + field4 + field5;
 
 var totaldisplay = document.getElementById("Total");
 totaldisplay.innerText = total;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT id="field1" type="text"><BR>
<INPUT id="field2" type="text"><BR>
<INPUT id="field3" type="text"><BR>
<INPUT id="field4" type="text"><BR>
<INPUT id="field5" type="text"><BR>
<INPUT type="button" onclick="calculate();" value="Calculate"><BR>
Total: <SPAN id="total">0.00</SPAN>
</FORM>
</BODY>
</HTML>