Question

I have a problem I’m hoping someone has come across and can help. I had a similar question posted (solved), but have had no further help with a new issue, so I thought I’d post with that question (sorry if this is taboo).

      <table border="1" class="autoTable">
 <tr>

<td>Description</td><td>Stocked</td><td>Quantity</td><td>Part Price</td>
<td>Hours</td>    
<td>Rate Class</td><td>Total</td><td>Approved</td><td>Add New Row</td>    
<td>Remove Row</td></tr>
<tr>
<td><input name="description[]" id="description" value="<?php echo $description; ?>" size="55" class="numeric add_to_total" onKeyPress="return disableEnterKey(event)" />

</td><td align="center"><input type="checkbox"  name="stocked[]" id="stocked" value="<?php echo $stocked; ?>" size="5" class="numeric add_to_total" onKeyPress="return disableEnterKey(event)" />
</td><td><input name="quantity[]" id="quantity" value="<?php echo $quantity; ?>" size="5" class="numeric add_to_total quantity" onKeyPress="return disableEnterKey(event)" />
</td><td><input name="partPrice[]" id="partPrice" value="<?php echo $partPrice; ?>" size="10" class="numeric add_to_total part" onKeyPress="return disableEnterKey(event)" />
</td><td><input name="hours[]" id="hours" value="<?php echo $hours; ?>" size="10" class="numeric add_to_total hours" onKeyPress="return disableEnterKey(event)" />
</td><td><select name="rate[]" id="rate" class="numeric add_to_total rate" onKeyPress="return disableEnterKey(event)">
<?php
    //php code here for rates
?>
</select>
</td><td><input name="total[]" id="total" size="10" class="numeric is_total" onKeyPress="return disableEnterKey(event)" />
</td><td align="center"><input type="checkbox" name="approved[]" id="approved" value="<?php echo $approved; ?>" size="10" onKeyPress="return disableEnterKey(event)" />
</td><td align="center"><img src="img/plus.png" width="25" height="25" id="addButton" title="Add New Row" class="addRow" />
</td><td align="center"><img src="img/x.png" width="25" height="25" id="removeButton" title="Remove Row" class="delRow" />
</td></tr>
</table>

I use the following code to add up the total row, but it doesn’t work for the second and subsequent dynamic rows.

$(".add_to_total").change(function() {
    var total = 0;
    $(".add_to_total").each(function() {
        var quantity = parseFloat($(".quantity").val()) || 0;
        var part = parseFloat($(".part").val()) || 0;
        var hours = parseFloat($(".hours").val()) || 0;
        var rate = parseFloat($(".rate").val()) || 0;
        total = (Number(quantity) * Number(part)) + (Number(rate) * Number(hours));
    });
    $(".is_total").val(total);
});

I’m hoping someone can help me…I’ve tried everything I can think of, and I really want to get this thing solved, and move on with my life 🙂

Thanks in advance.

Answer 1

I don’t see where the classes add_to_total, quantity, part, hours, rate or is_total are in your HTML, or which elements you’re trying to select in your Javascript as a result…hope this helps…

EDIT:

Thinking about it again, it might be as a result of the newly-added rows’ add_to_total classed elements not being bound to change events. Have you considered using the .live() / .on() jQuery events (depending on what version of jQuery you’re using)?

http://api.jquery.com/live/ (jQuery < 1.7)

http://api.jquery.com/on/ (jQuery >= 1.7)

Maybe implemented something like this:

// using the .live() event...
$(".add_to_total").live('change', function(){ ... });

// using the .on() event...
$(".add_to_total").on('change', function(){ ... });

EDIT:

Haha! Hopefully the last edit! Well, considering the following code:

var quantity = parseFloat($(".quantity").val()) || 0;

This will always return the first $(".quantity")‘s value, although a set of elements is actually selected…this is just the functionality of the .val() function in jQuery. What you’re looking to do is process calculations for each of the rows, like you said. Simplified, you need to get the TR element for the current add_to_total, only focus on its children, then move on.

Obviously this is processing a LOT of unnecessary calculations, and I would suggest rather adding a class to each of the rows which need to have calculations run on them and loop through them directly rather:

<tr class="dynamic_row"> ... </tr>

Then in the Javascript:

$(".add_to_total").on('change', function() {
    var total = 0;
    $(".dynamic_row").each(function() {
        var row = $(this);
        var quantity = parseFloat(row.find(".quantity").val()) || 0;
        var part = parseFloat(row.find(".part").val()) || 0;
        var hours = parseFloat(row.find(".hours").val()) || 0;
        var rate = parseFloat(row.find(".rate").val()) || 0;
        total = (Number(quantity) * Number(part)) + (Number(rate) * Number(hours));
    });
    row.find(".is_total").val(total);
});

Hope this helps! 🙂