jQuery Shopping Cart summing Subtotal to calculate Total Price

Question

I have 2 shopping cart items and simply want to calculate total price by using price, quantity , subtotals but it returns NaN output .

I tried parseFloat but I don't know where I went wrong .

Hope I get some help thanks...

HTML Code:

 
                    
                      
                      Margarhitta
                      Lorem ipsum sajdhasdhashd sajdhasdhashd sajdhasdhashd
                    
                    

                     

                    13.99
                    
                    
                    
                      
                     
                    
                      
                      
                    
                    
                    13.99
                      
                    
                    
                    
                    
                    
                
                
                
            

          
          0

jQuery Code:.............................................

$('.qty').change(function() {
      updateQuantity(this);
    });


    function recalculateCart(){
      subtotal = 0 ;
      var cartRow = $('.price').closest('tr');

      cartRow.each(function(){
        subtotal += parseFloat($(this).children('.subtotal').text());
      })
      
      $('#total').html(subtotal.toFixed(2));



    }

    function updateQuantity(qtyInput){
      var cartRow = $(qtyInput).closest('tr');
      var price = parseFloat($('.price', cartRow).text());
      var quantity = $('.qty',cartRow).val();
      var subtotal = $('.subtotal', cartRow);
      var linePrice = price * quantity;

      subtotal.each(function(){
        $(this).text(linePrice.toFixed(2));
         recalculateCart();
      })
    }

Swati · Accepted Answer

You need to check if the span subtotal value is not empty if yes then only use parseFloat() else get value of that span as 0 and do further calculation.

Demo Code :

$('.qty').change(function() {
  updateQuantity(this);
});


function updateQuantity(qtyInput) {
  var cartRow = $(qtyInput).closest('tr');
  var price = parseFloat($('.price', cartRow).text());
  var quantity = $('.qty', cartRow).val();
  var subtotal = $('.subtotal', cartRow);
  var linePrice = price * quantity;
  $(subtotal).text(linePrice.toFixed(2));
  total_calculate() //call
}

function total_calculate() {
  var total = 0;
  //loop through subtotal
  $(".cart .subtotal").each(function() {
    //chck if not empty
    var value = $(this).text() != "" ? parseFloat($(this).text()) : 0;
    total += value; //add that value
  })
  //assign to total span
  $("#total").text(total.toFixed(2))
}
total_calculate()

jQuery Shopping Cart summing Subtotal to calculate Total Price

Answers (1)

Related Questions