JQuery, calculate sum of fields (dynamic)
I had a search, but I didn't find anything that I'm trying to do.
I have a dynamic form that has 2 input fields for each item, 1 is the value and the other is the quantity. For example.
<table class="table table-striped table-condensed table-bordered">
<thead>
<tr>
<th>Item</th>
<th width="20%">Value</th>
<th width="20%">Quantity</th>
<th class="actions">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item</td>
<td><input type="text" class="input-small" name="var_1" value="0"></td>
<td><input type="text" class="input-small" name="var_1_1" value="0"></td>
<td>$<span class="amount"></span> </td>
</tr>
<tr>
<td>Item</td>
<td><input type="text" class="input-small" name="var_2" value="0"></td>
<td><input type="text" class="input-small" name="var_2_2" value="0"></td>
<td>$<span class="amount"></span> </td>
</tr>
<tr>
<td colspan="3"><strong>Total event cost (viability)</strong></td>
<td><strong>$<div class="total_amount">total</div></strong></td>
</tr>
</tbody>
So, I need to calculate val_1 X val_1_1 = total and then add the total at the end (for each item).
I was hoping to find something that would work with unlimited elements.
source to share
How about this: jsFiddle example .
JQuery
function doCalc() {
var total = 0;
$('tr').each(function() {
$(this).find('span.amount').html($('input:eq(0)', this).val() * $('input:eq(1)', this).val());
});
$('.amount').each(function() {
total += parseInt($(this).text(),10);
});
$('div.total_amount').html(total);
}
$('button').click(doCalc);
source to share
Your biggest problem is that you don't have an easy way to make sure that you are defining which fields are values and which are quantities. As you wrote it, any single underscore field name can be a value, but what about fields named "some_value_1"?
Using table positioning is a good solution if no one is adding more columns to the table. I think you should use a class to specify which fields are values or which ones are values.
Anyway, my solution, a little verbose for clarity:
<form>
<label>cost: <input type="text" name="cost_1" size="5" class="summable"/></label>
<label>qty: <input type="text" name="cost_1_qty" size="2"/></label><br/>
<label>cost: <input type="text" name="cost_2" size="5" class="summable"/></label>
<label>qty: <input type="text" name="cost_2_qty" size="2"/></label><br/>
<label>cost: <input type="text" name="cost_3" size="5" class="summable"/></label>
<label>qty: <input type="text" name="cost_3_qty" size="2"/></label><br/>
<strong id="summation"></strong><br/>
</form>
<script type="text/javascript">
function doTotal() {
var total = 0.0;
$(".summable").each(function (idx, element) {
$this = $(this);
var cost = parseFloat($this.val());
var qty_selector = '[name=' + $this.attr('name') + '_qty' + ']'; // eg: [name=cost_3_qty]
var qty = parseFloat($(qty_selector).val());
if (cost && qty)
total += cost * qty ;
});
$("#summation").html(total.toFixed(2));
}
$(document).ready(function() {
$("input[type=text]").blur(function (e) {
doTotal();
})
});
</script>
source to share
I think this will do what you are looking for.
function calcCost() {
var total = 0;
$('table tr').each( function() {
if ( $(this).find('td').length && $(this).find('td input').length ) {
var quant = parseInt($(this).find('td input').eq(0).val()),
price = parseInt($(this).find('td input').eq(1).val());
$(this).find('.amount').html(quant * price);
total += quant * price;
}
});
$('.total_amount').html(total);
}
calcCost();
$('input').on('keyup', function() {
calcCost();
});
source to share