CODEWITHSUNDEEP
jquery
samita
samita

Reputation: 175

Total sum of one row displayed

I have calculated total of each row and tried to calculate the total of each row but only row whose quantity is changed is displayed . How to calculate total of each row?? Jquery version is 2.2.4. 

<tr class="cartoon">
    <td class="col-sm-1 col-md-1 quantity"  style="text-align: center">
        <input type="number" class="form-control fname"   value="1" min="1" label="">
    </td>
    <td class="col-sm-1 col-md-1 text-center pr-01 price" ><strong></strong>
        <input type="hidden" class="form-control artprice"  value="1" label="">
    </td>
    <td class="col-sm-1 col-md-1 text-center pr-01 total" ><strong></strong>
        <input type="hidden" class="form-control total" name = "cart" value="" label="">
    </td>
    <td class="col-sm-1 col-md-1">
        <div class="product" data-id = "key" >
        <button type="button" class="btn btn-danger remove-from-cart" >
            Remove
        </button>
        </div>
    </td>
</tr>

<tr>
    <td></td>
    <td > <h3  style="color: white;" id="cart-total">Total</h3></td>
    <td></td>
    <td>  <div class="text-right final" ><strong>14.5$ </strong></div></td>
    <td></td>
</tr>

Javascript:

jQuery($ => {
    $('.fname').on('change', function() {
        let total = 0;
        let final = 0;
        let $row = $(this).closest('tr');
        let price = $row.find(".artprice").val();
        $row.find('.total strong').text( (this.value * price).toFixed(2)+ '$' );
        $('tr').each(function(){
            total = total + parseFloat($('.artprice').val())*parseFloat($('.fname').val());
        });
        $('.final strong').text(total + '$');
    });
});

Upvotes: 0

Views: 94

Answers (2)

Don&#39;t Panic
Don&#39;t Panic

Reputation: 14510

Here's a working JSfIddle, based on your code.

Here's another JSFiddle of a better approach, with less, cleaner, and simpler code - description below.

The problem is that in the last section of the JS, where you are summing up the final cart total:

$('tr').each(function(){
    // ...

You use the selector $('.artprice'). But there are more than one of those, and that selector will match all of them. Maybe you were expecting $('.artprice').val() to actually give you all the values, or the sum, but it won't, it will just give you the value of the very first one on the page.

Same problem for $('.fname').val() - that will just give you the value of the first one, not all, and not the sum.

So you need to apply the same kind of traversing logic to this final summing section as you did in the first section calculating the price of the changed row:

// Use .cartoon so we only match product rows, not the cart-total row
$('tr.cartoon').each(function(){
    $row = $(this);
    price = parseFloat($row.find('.artprice').val());
    quantity = parseFloat($row.find('.fname').val());
    total = total + price * quantity;
    console.log('price', price, 'quantity', quantity, 'total', total);
});
$('.final strong').text(total + '$');

But, if you take a step back, this final cart-total section is actually doing the same thing as the section that calculates the price for the changed row. It calculates the price for every row, and sums them up for the final total. So you could remove the first part, and just use that second final loop to do everything. The second JSFiddle, I linked above does this.

Upvotes: 0

Hien Nguyen
Hien Nguyen

Reputation: 18975

You miss table tag so closest not work.

Second thing, you get artprice without context need change to $(item).find('.artprice').val()

You can use reduce function to calculate total as below

total = [...document.getElementsByTagName("tr")].reduce((acc, item)=>{
 if($(item).find('.artprice').val() != undefined){
 let subtotal = parseFloat($(item).find('.artprice').val()) * parseFloat($(item).find('.fname').val());
 acc += subtotal;
}
 return acc;
}, 0);


jQuery($ => {
    $('.fname').on('change', function() {
        let total = 0;
        let final = 0;
        
        let $row = $(this).closest('tr');
        let price = $row.find(".artprice").val();
       
        $row.find('.total strong').text( (this.value * price).toFixed(2)+ '$' );
        <!-- $('tr').each(function(){ -->
            <!-- total = total + parseFloat($('.artprice').val())*parseFloat($('.fname').val()); -->
        <!-- }); -->
		total = [...document.getElementsByTagName("tr")].reduce((acc, item)=>{
			if($(item).find('.artprice').val() != undefined){
			let subtotal = parseFloat($(item).find('.artprice').val()) * parseFloat($(item).find('.fname').val());
			acc += subtotal;
			}
			return acc;
		}, 0);
        $('.final strong').text(total + '$');
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
<tr class="cartoon">
    <td class="col-sm-1 col-md-1 quantity"  style="text-align: center">
        <input type="number" class="form-control fname"   value="1" min="1" label="">
    </td>
    <td class="col-sm-1 col-md-1 text-center pr-01 price" ><strong></strong>
        <input type="hidden" class="form-control artprice"  value="1" label="">
    </td>
    <td class="col-sm-1 col-md-1 text-center pr-01 total" ><strong></strong>
        <input type="hidden" class="form-control total" name = "cart" value="" label="">
    </td>
    <td class="col-sm-1 col-md-1">
        <div class="product" data-id = "key" >
        <button type="button" class="btn btn-danger remove-from-cart" >
            Remove
        </button>
        </div>
    </td>
</tr>
<tr class="cartoon">
    <td class="col-sm-1 col-md-1 quantity"  style="text-align: center">
        <input type="number" class="form-control fname"   value="1" min="1" label="">
    </td>
    <td class="col-sm-1 col-md-1 text-center pr-01 price" ><strong></strong>
        <input type="hidden" class="form-control artprice"  value="1" label="">
    </td>
    <td class="col-sm-1 col-md-1 text-center pr-01 total" ><strong></strong>
        <input type="hidden" class="form-control total" name = "cart" value="" label="">
    </td>
    <td class="col-sm-1 col-md-1">
        <div class="product" data-id = "key" >
        <button type="button" class="btn btn-danger remove-from-cart" >
            Remove
        </button>
        </div>
    </td>
</tr>
<tr>
    <td></td>
    <td > <h3  style="color: white;" id="cart-total">Total</h3></td>
    <td></td>
    <td>  <div class="text-right final" ><strong>14.5$ </strong></div></td>
    <td></td>
</tr>
</table>

Upvotes: 1

Related Questions