Javascript Calculate sum of multiple HTML input values
im looking for Javascript code to calculate the sum from multiple HTML input values. Exposure inputs are dynamic, so I'm looking for something like "for each" input.
the format with numbers is 1,000.00 (space as thousands separator and as decimal separator).
My inputs are in both arrays, so ID and NAME:
input_sum1[0]
input_sum1[1]
input_sum1[2]
input_sum2[0]
input_sum2[1]
input_sum2[2]
Any suggestions?
Thanks in advance!
source to share
JQuery example. Provide a class name for your text fields.
<script>
$(document).ready ( function () {
$("#btn1").click ( function () {
var resultVal = 0.0;
$(".test").each ( function() {
resultVal += parseFloat ( $(this).val().replace(/\s/g,'').replace(',','.'));
});
alert ( resultVal );
});
});
</script>
<input type="text" value="10" class="test" />
<input type="text" value="20" class="test" />
<input type="text" value="30.50" class="test" />
<input type="text" value="1" class="test" />
<input type="text" value="1" class="test" />
<br />
<button id="btn1">click</button>
source to share
- Give your form
id
, it will make life easier. - Get a reference to a form object via
document.getElementById
(or if you are using Prototype or jQuery, they have shorthand ways to do this). - Loop through the shape array
elements
. - Check each element to see if it is an input text box.
- If so, return its property
value
; it will be a string. - Use regexp to remove spaces.
- It may need to convert commas to periods, but I haven't tested that; if so, another regex.
- Use
parseFloat
to get the value. - Add it to your amount.
- Profit
source to share
You will not get paring parsing in local format in JavaScript, so you will need to do a string replacement to get something parseFloat()
to handle:
<div id="inputs">
<input type="text" />
<input type="text" />
...
</div>
<p>
<input type="button" id="summer" value="Sum" />
<input type="text" id="sum" />
</p>
<script type="text/javascript">
document.getElementById('summer').onclick= function() {
var sum= 0;
var inputs= document.getElementById('inputs').getElementsByTagName('input');
for (var i= inputs.length; i-->0;) {
var v= inputs[i].value.split(',').join('.').split(' ').join('');
if (isNaN(+v))
alert(inputs[i].value+' is not a readable number');
else
sum+= +v;
}
document.getElementById('sum').value= sum;
};
</script>
(You don't need the <form> element or any input names if this is a purely client-side thing that you never expect to present.)
Note that this uses floating point numbers, so the sum of 0.1 and 0.2 may not be what you think. If you are looking at monetary amounts, floating point is not suitable and you will have to come up with a parser based on a fixed or decimal basis.
source to share