Question

With php I generate a form based on a multidimensional array. The form contains a number of input type=”text” fieldpairs that are named “items[level1][level2][price]” and “items[level1][level2][amount]”. I display these in a table.

Now, I want to add two things using jquery:

1. an extra column that displays the total price for this item (=items[level1][level2][price].value * items[level1][level2][amount].value)
2. At the bottom row: the total price for all items.

These values should update on every change-event of one of the mentioned textinputs.

I’ve been hitting a wall the last few hours, I hope someone here could give me some pointers.

Here’s a snippet of the generated html:

<form name="formname">
<table name="tablename">
    <tr>
        <td><input type="text" class="classname" name="items[1][2][amount]" /></td>
        <td><input type="text" class="classname" name="items[1][2][price]" /></td>
        <td>Here I want to display amount*price</td>
    </tr>
    <tr>
        <td><input type="text" class="classname" name="items[1][8][amount]" /></td>
        <td><input type="text" class="classname" name="items[1][8][price]" /></td>
        <td>Here I want to display amount*price</td>
    </tr>
    <tr>
        <td><input type="text" class="classname" name="items[3][4][amount]" /></td>
        <td><input type="text" class="classname" name="items[3][4][price]" /></td>
        <td>Here I want to display amount*price</td>
    </tr>
    ...more rows like above...
    <tr>Some more formelements that have nothing to do with the problem</tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>Here I want to display the sum of all amount*price</td>
    </tr>
</table>
</form>

Answer 1

There are a few ways you could do it. The basic idea is when the .classname input changes, look for the parent row and then use that to look for the inputs in that row to multiply together and the td to put the value it. You can look for them using a “name contains” [attr*=string] selector:

$('.classname').on('change', function() {
    var row = $(this).closest('tr');
    var total = row.find('[name*=amount]').val() * row.find('[name*=price]').val();

    row.find('td:last').text(total);
});

Demo: http://jsfiddle.net/jtbowden/DJtTs/

Or if they are always the 1st/2nd column, use .eq() or :eq():

$('.classname').on('change', function() {
    var row = $(this).closest('tr');
    var total = row.find('input:eq(0)').val() * row.find('input:eq(1)').val();

    row.find('td:last').text(total);
});

Demo: http://jsfiddle.net/jtbowden/DJtTs/1/

EDIT MARCO:

$(".classname").live('change', function(e) {
    //replaced on with live so the function will stick.
    var row = $(this).closest('tr');
    var total = row.find('[name*=amount]').val() * row.find('[name*=price]').val();
    row.find('[id="totalitemprice"]').text("\u20ac "+total.toFixed(2));
    //added eurosign and rounded to 2 decimals

    //Start computing total value
    var totaltotal = parseFloat(0);
    $.each($('[id="totalitemprice"]'), function(key, value) {
        //Loop across all totalitemprices
        totaltotal += parseFloat(value.firstChild.data.replace(/\u20ac /g,''));
        //Find out what's in the cell, strip the eurosign, parse it to Float and add it to the total
    });

    $("#totalprice").text("\u20ac "+totaltotal.toFixed(2));
    //Finally, write the total price to the approprioate cell.
});