Jquery, calculate sum of fields (dynamic)

Question

I've had a search but haven't found anything that is really what I'm trying to do.

I have a dynamic form which has 2 input boxes per item, 1 being a value and the other being a quantity. E.g.

<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 all up at the end (for each item).

I was hoping i would find something that will work with unlimited items.

You need to show the markup to get any sort of useful answer. — mikevoermans
– mikevoermans, Commented Mar 28, 2012 at 2:31

j08691 · Accepted Answer · 2012-03-28 03:19:01Z

8

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

answered Mar 28, 2012 at 3:19

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mikevoermans Over a year ago

I like yours more - more concise.

mylesthe.dev Over a year ago

Wow perfect! I will implement now and let you know how i get on. much appreciated.

slashingweapon · Accepted Answer · 2012-03-28 03:29:20Z

Your biggest problem is really that you have no easy way to make sure you identify which fields are values and which ones are quantities. The way you've written it, any field name with a single underscore could be a value, but what about fields named "some_value_1"?

Using table positioning is a good solution, so long as nobody adds more columns to your table. I think you should use a class to indicate either which fields are a value, or which ones are quantities.

Anyway, my solution, slightly 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>

mikevoermans · Accepted Answer · 2012-03-28 03:20:25Z

0

I think this will do what you're 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();
});

edited Mar 28, 2012 at 3:20

answered Mar 28, 2012 at 3:14

mikevoermans

4,00725 silver badges27 bronze badges

Collectives™ on Stack Overflow

Jquery, calculate sum of fields (dynamic)

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related