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.

Answer 1

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

Answer 2

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>