Dynamic Fields - Adding For Total - Each Line

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 wi

Solution 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! :)

Solution 2:

Thanks to Chris' suggestion, I moved the row.find(".is_total").val(total); associated to the row. In his suggestion, he had it outside the element where it was declared, so I think the function didn't know what we were talking about.

I also changed the
$(".add_to_total").change(function() {
to:
$(".add_to_total").live('change',function() {
in order to make it function on each occurance, as I understand it from his Edit #3.

So the final function to calculate the totals is:

$(".add_to_total").live('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);
    });
});

Since I'm a relatively newcomer to Stack Overflow, I'm not sure how to give him any credit, other than to accept his as an accepted answer, and to uptick the Useful option.

Thank you VERY much!