Calculate one x another in jQuery

Question

I'm getting NaN. How can I do this and have it update every time time qty is changed?

$('input[name="qtybox"]').change(function(){
var price = parseInt($(this).text(), 10)
* parseFloat($(this).closest('#price').text(), 10);
$("#tPrice").html(price);
});
<td id="price">2.79</td>
<td id="qty-box"><input type="text" name="qtybox"></td>
<td id="tPrice"></td>

Have you tried stepping through and debugging this to see which part is failing? — jzworkman, Mar 21 '12 at 19:12
Correct, and that's because I'm waiting for the user to enter quantity — Mosaic, Mar 21 '12 at 19:15
ID's are singular and cannot be repeated throughout a document. You should consider not using id for 'price' element if there are multiple prices. instead use classes (which can be repeated). If price is the only element with that id then you don't need to 'closest()' anything because $('#price') will return the only value. — rlemon, Mar 21 '12 at 19:22

j08691 · Accepted Answer · 2012-03-21T20:10:33.923

1

Are you looking for something like this jsFiddle example?

jQuery:

$('input.qtybox').each(function() {
    $(this).keyup(function() {
        var price = $(this).parent().siblings('td#price').text();
        var qty = $(this).val();
        $(this).parent().siblings('td#tPrice').html(isNaN( ((price * qty).toFixed(2)) ) ? 0 : ((price * qty).toFixed(2)));
    })
})

edited Mar 21 '12 at 20:10

answered Mar 21 '12 at 20:01

j08691

204,283
31
260
272

Your jsFiddle is somewhat different from the example. I won't be able to look at this until later but feel free to nudge me if I forget. – j08691 Mar 21 '12 at 21:15
Thanks. I guess I really DO nudge – Mosaic Mar 21 '12 at 21:17
Please look at my question. http://stackoverflow.com/questions/10219278/php-show-error-messages-in-order-and-re-display-correct-fields Thanks! – Mosaic Apr 18 '12 at 23:16

score 0 · Answer 2 · answered Mar 21 '12 at 19:15

0

parseInt() evaluates to NaN. You're trying to parse an integer from an empty string.

Please provide a more complete code sample; I believe the problem is that you're trying to use closest() when you should be using find().

answered Mar 21 '12 at 19:15

Blazemonger

90,923
26
142
180

score 0 · Answer 3 · answered Mar 21 '12 at 19:15

0

A table cell doesn't have a value. Use the text method instead.

Also, parsing the string 2.79 as an integer will give you just 2.

parseFloat($(this).closest('#price').text())

answered Mar 21 '12 at 19:15

Guffa

687,336
108
737
1,005

I updated and still getting NaN. Here's the updated code, $('input[name="qtybox"]').change(function(){ var price = parseInt($(this).text(), 10) * parseFloat($(this).closest('#price').text(), 10); $("#tPrice").html(price); }); – Mosaic Mar 21 '12 at 19:32
@user1157575: You should still use `val()` for the input. – Guffa Mar 21 '12 at 19:53

score 0 · Answer 4 · answered Mar 21 '12 at 19:21

The problem is that .closest() looks up the chain. To make things less complicated, just don't specify a boundary:

$('#tPrice').each(function(){
    var price = parseInt($('input[name="qtybox"]').val(), 10 * parseInt($('#price').val(), 10);
    $(this).html(price);
});

To keep your current model:

$('#tPrice').each(function(){
    var price = parseInt($(this).prevAll('input[name="qtybox"]').val(), 10 * parseInt($(this).prevAll('#price').val(), 10);
    $(this).html(price);
});

Though you should really never constrain an ID selector unless you have a good reason to, because it can't be optimized if you do so.

Calculate one x another in jQuery

4 Answers4

Linked