Sum of dynamic input fields? jQuery

Question

I'm working on a form that calculates using multiplication and addition, but I can't seem to get the pieces to fall together correctly....

http://jsfiddle.net/cSfYE/

$('.qty').on('keyup', function() {
var sum = 0;
$("tbody tr").each(function(i,o){
    total = parseInt($(o).find(".qty").val(), 10) * parseInt($(o).find(".price-integer").val(), 10);
    if(!isNaN(total) && total.length!=0) {
        $(o).find(".install-total").val(total);
        sum += total;
    }
});
$("#total-equipment").val(sum);
});

When the user types in a quantity, say 2 in the first column, that should multiply by the figure in the fourth column (3,000) and be outputted into the Install Total column.

Then all the numbers in the Install Total column need to be added up and outputted in the Total Equipment Cost input field.

And finally, the + Installation figures need to add up.

And all this has to happen after the user enters a quantity, which that part works. Yay.

I can't seem to get the syntax right or something! I've been looking at stackoverlow.com's posts for the past few days and nothing is working, so I'm hoping someone could throw me a bone and help me out. I really do appreciate your time.

$(o).find(".qty").val() is one issue, the td doesn't have a value. Try $(o).find("input.qty").val(). You're making the same mistake when you get the price. — user400654
– user400654, Commented Oct 31, 2013 at 19:23

charlietfl · Accepted Answer · 2013-10-31 19:25:39Z

5

Problem rises in your selectors within row. You are referencing the <td> classes, not the inputs within them

This works, but might alos consider adding class to the inputs instead

 total = parseInt($(o).find(".qty input").val(), 10) * parseInt($(o).find(".price-integer input").val(), 10);

DEMO Updated

EDIT: addiitonal note - removed the test for length since integer doesn't have length

answered Oct 31, 2013 at 19:25

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

5 Comments

Stephanie Over a year ago

Thank you for that! I really appreciate it. It worked just fine. One more thing -- I'm trying to get the + Installation part to work. I updated the JS Fiddle: jsfiddle.net/cSfYE/1 So, if a quantity is filled out in the first three fields, then add up the Installation cost (which is a hidden input field). I thought what I did was right, but it's not working. Thoughts?

charlietfl Over a year ago

not seeing any hidden field...where is it? Also why can't you just add it in the if( !isNaN)

Stephanie Over a year ago

Hi Charlietfl, Sorry I just added it. jsfiddle.net/cSfYE/3 <input type="hidden" value="500" class="installation-quote" name="installation-quote">

Stephanie Over a year ago

Hi Charlietfl, it's a install per unit. I guess it would be the same code as the first one, but I'm not sure where to put it? Is "sum" a variable that I can change the name of?

charlietfl Over a year ago

a simple if to see if install in row if($(o).find(".installation-quote').length) then do math and add to total

Collectives™ on Stack Overflow

Sum of dynamic input fields? jQuery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related