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">
        <th width="20%">Value</th>
        <th width="20%">Quantity</th>
        <th class="actions">Total</th>
        <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>
        <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>
        <td colspan="3"><strong>Total event cost (viability)</strong></td>
        <td><strong>$<div class="total_amount">total</div></strong></td>


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

3 answers

How about this: jsFiddle example .


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);




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:

        <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/>
    <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 ;


        $(document).ready(function() {
            $("input[type=text]").blur(function (e) {




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;



$('input').on('keyup', function() {




All Articles