JQuery: looping over multidimensional array of form input elements

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:

an extra column that displays the total price for this item (=items[level1][level2][price].value * items[level1][level2][amount].value)
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>

Can you post your jQuery code?

elclanrs
– elclanrs

2012-04-13 00:48:23 +00:00
Commented Apr 13, 2012 at 0:48 — elclanrs
– elclanrs, Commented Apr 13, 2012 at 0:48

Jeff B · Accepted Answer · 2012-04-13 19:58:59Z

3

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

edited Apr 13, 2012 at 19:58

answered Apr 13, 2012 at 1:01

Jeff B

30.1k7 gold badges64 silver badges91 bronze badges

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

4 Comments

Marco Over a year ago

Thanks a lot Jeff! This gives me a push in the right direction, probably enough :)

Jeff B Over a year ago

Great! When you use someone's answer it is polite to upvote and/or accept the answer (click the checkmark below the number next to the question). You probably can't upvote when you are a new user, but you can always accept answers to questions you ask.

Marco Over a year ago

I got that Jeff, but I wanted to wait until I was 100% sure it would solve my problem. I accepted the answer and added my final jquery code to it. Thanks as well for the jsFiddle link - I did not know that and it rocks!

Jeff B Over a year ago

@Marco, glad it helped. As a note, on() replaces live() in newer versions of jQuery. To make on() "stick", as you say, you need to call it on any parent element, and filter it with the classname: $('tr').on('click', '.classname', function() {.... This will do the same as your live call.

Collectives™ on Stack Overflow

JQuery: looping over multidimensional array of form input elements

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related