Spaceman Spaceman - 4 months ago 15
Javascript Question

Jquery .each() defined by class not working - displays first element but not the rest

I have the following table that contains items in a shopping cart

<table border='1'>
<thead>

<tr>
<th colspan='3'>
<strong id='jcart-title'>Shopping Cart</strong> (3 Items)
</th>
</tr>

</thead>
<tfoot>

<tr>
<th colspan='3'>
<input type='submit' id='jcart-checkout' name='jcartCheckout' class='jcart-button' value='checkout' style='display:none' />
<span id='jcart-subtotal'>Before Tax Subtotal: <strong>$9.97</strong></span>
</th>
</tr>

</tfoot>
<tbody>

<tr>
<td class='jcart-item-qty' style='background:#FFF;'>
<input name='jcartItemId[]' type='hidden' value='63927746787' />
<input class='qty' id='jcartItemQty-63927746787' name='jcartItemQty[]' size='2' type='text' value='1' />
</td>
<td class='jcart-item-name' style='background:#FFF;'>
MARTINI OLIVES - STUFFED OLIVES - 5oz
<input name='jcartItemName[]' type='hidden' value='MARTINI OLIVES - STUFFED OLIVES - 5oz' />
</td>
<td class='jcart-item-price' style='background:#FFF;'>
<span>$1.99</span><input class='price' name='jcartItemPrice[]' type='hidden' value='1.99' />
<a class='jcart-remove' href='?jcartRemove=63927746787'>remove</a>
</td>
</tr>

<tr>
<td class='jcart-item-qty' style='background:#FFF;'>
<input name='jcartItemId[]' type='hidden' value='FB' />
<input class='qty' id='jcartItemQty-FB' name='jcartItemQty[]' size='2' type='text' value='1' />
</td>
<td class='jcart-item-name' style='background:#FFF;'>
FLASK BAG - PLASTIC - 0 OZ
<input name='jcartItemName[]' type='hidden' value='FLASK BAG - PLASTIC - 0 OZ' />
</td>
<td class='jcart-item-price' style='background:#FFF;'>
<span>$1.99</span><input class='price' name='jcartItemPrice[]' type='hidden' value='1.99' />
<a class='jcart-remove' href='?jcartRemove=FB'>remove</a>
</td>

</tr>
<tr>
<td class='jcart-item-qty' style='background:#FFF;'>
<input name='jcartItemId[]' type='hidden' value='011403' />
<input class='qty' id='jcartItemQty-011403' name='jcartItemQty[]' size='2' type='text' value='1' />
</td>
<td class='jcart-item-name' style='background:#FFF;'>
SHAKER - SHAKER -
<input name='jcartItemName[]' type='hidden' value='SHAKER - SHAKER - ' />
</td>
<td class='jcart-item-price' style='background:#FFF;'>
<span>$5.99</span><input class='price' name='jcartItemPrice[]' type='hidden' value='5.99' />
<a class='jcart-remove' href='?jcartRemove=011403'>remove</a>
</td>
</tr>

</tbody>
</table>


I want to extract .qty and .price input values for each item using the following jquery. Note: Im using $(body).click( to initiate the function.

$('body').click(function() {
var grandTotal = 0;
var qty = $('.qty').val();
var price = $('.price').val();
var subtot = qty * price; $('tr').each(function (i) {

$('#printorder').html('QTY: ' + qty +', PRICE: '+ price +', TOTAL:' + subtot +'<br>');
});


I get a one line result... QTY: 1, PRICE: 1.99, TOTAL:1.99 but there are three items in the table. Does anyone have any ideas what is going wrong?

Answer

You're not correctly using the context of your loop. Also, you're setting the html of the output multiple times.

Try this:

$('body').click(function() {
var output = '';
$('tbody tr').each(function (i) {
    var qty = $(this).find('.qty').val();
    var price = $(this).find('.price').val();
    var subtot = qty * price;
    output += 'QTY: ' + qty +', PRICE: '+ price +', TOTAL:' + subtot +'<br>';
});
$('#printorder').html(output);

edit; Here's what your original code is doing:

$('body').click(function() {
var grandTotal = 0; 
var qty = $('.qty').val(); // sets qty to val of first item in $('.qty') (runs once)
var price = $('.price').val(); // sets price to val of first item in $('.price') (runs once)
var subtot = qty * price; 
$('tr').each(function (i) { // loops over all <tr> tags, runs 5 times
    // sets $('#printorder') innerHtml with values calculated outside of loop (always the same value).
    // this happens 5 times with the same values, and each time overwrites the last
    $('#printorder').html('QTY: ' + qty +', PRICE: '+ price +', TOTAL:' + subtot +'<br>');
});