jQuery: calculate price, total, shipping and vat in a cart system

Question

Case:

I'm trying to create a Cart system that will Calculate the price based on the quantity of ordered items, then will be sum with the shipping amount and finally calculate the grand total adding VAT price.

Code:

$(document).ready(function(){

        update_amounts();
        $('.qty').change(function() {
            update_amounts();
        });
    });

function update_amounts()
    {
        var sum = 0.0;
        $('#myTable > tbody  > tr').each(function() {
            var qty = $(this).find('option:selected').val();
            var price = $(this).find('.price').val();
            var amount = (qty*price)
            sum+=amount;
            $(this).find('.amount').text(''+amount);
        });
        //calculate the total to sum  
        $('.total').val(sum);
        //calculate total + shipping and add VAT
        var shipping = $(this).find('.shipping').val();
        var total = $(this).find('.total').val();
        var vat = $(this).find('.vat').val();
        //calculate vat
        var vat_amount = ((total, 10) * 100);
        //calculate grand total
        var total_shipping = (total+shipping);
        var ship_amount = (total_shipping+vat_amount);
        sum+=ship_amount;
        $('.grandTotal').val(sum);
    }

Behaviour:

This don't work even if I've taken the first part of a working fiddle, can't see data changing on item total price, and can't calculate the grand total too.

Expected Behaviour:

When an user click on the Q.ty select: - total of the row must to be updated calculating price * qty - total of rows price must to be updated - the sum of total of row price must to be added to shipping price - finally the vat, calculated on sum of total row must return the grand total.

Fiddle:

Here is a full fiddle with the html part adapted (I'm using a PHP script to populate the table) https://jsfiddle.net/a1o2nmw8/1/

Thanks to all who can collaborate.

Answer 1

On the Example you posted you are not using any library. Try this one, it changes for me.

UPDATED: also added .toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}); for the Grand Total.

$(document).ready(function(){

        update_amounts();
        $('.qty').change(function() {
            update_amounts();
        });
    });

function update_amounts()
        {
        var sum = 0.0;
        $('#myTable > tbody  > tr').each(function() {
            var qty = $(this).find('option:selected').val();

            var price = $(this).find('.price').text();

            var amount = (qty*price)

            sum+=amount;

            $(this).find('.amount').html(''+amount);

        });
        //calculate the total to sum  
        $('.total').val(sum);
        //calculate total + shipping and add VAT
        var shipping = $('.shipping').val();
        var total = $('.total').val();
        var vat = $('.vat').val();
        //calculate vat
        var vat_amount = ((total*vat)/100);
        //calculate grand total
                var total_shipping  = (parseFloat(total)+parseFloat(shipping));

        var grand_total = (parseFloat(total_shipping)+parseFloat(vat_amount)).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});;

        $('.grandTotal').val(grand_total);
    }

https://jsfiddle.net/a1o2nmw8/10/

Answer 2

$(document).ready(function(){
		    update_amounts();
		    $('.qty').change(function() {
		        update_amounts();
		    });
		});

function update_amounts()
		{

				var sum = 0.0;
		    $('#myTable > tbody  > tr').each(function() {
       
		        var qty = $(this).find('option:selected').val();
		        var price = $(this).find('.price').text();
		        var amount = (qty*price)
		        sum+=amount;
		        $(this).find('.amount').text(''+amount);
		    });
		    //calculate the total to sum  
		    $('.total').val(sum);
		    //calculate total + shipping and add VAT
		    var shipping = $('.shipping').val();
		    var total = $('.total').val();
		    var vat = $('.vat').val();
		    //calculate vat
		     var vat_value = ((total*vat)/100);
		    //calculate grand total
		    
        sub_total = (parseFloat(total)+parseFloat(shipping)).toFixed(1);
        
		    var grand_total = (parseFloat(sub_total)+parseFloat(vat_value                    )).toFixed(1);
		  
		    $('.grandTotal').val(grand_total);
		}
            	
               
            
        

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table class="table table-striped" id="myTable">
  	<thead>
  		<tr>
		  <th>ID</th>
		  <th>Name</th>
		  <th>Desc</th>
		  <th>Q.ty</th>
		  <th>Price</th>
		  <th>Total</th>
		</tr>
  	</thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>product</td>
        <td>description</td>
        <td><select class="qty" value="500">
        <option value="500">500</option>
        <option value="1000">1000</option>
        </select></td>
        <td><span class="price">50.0</span></td>
        <td><span class="total">0.0</span></td>
      </tr>
    </tbody>
  </table>
  <div class="row">
	  <div class="col-sm-3 col-sm-offset-9">
	  	<table class="table table-striped">
	  		<tr>
	  			<td>Total</td>
	  			<td><input type="text" class="total input" value="0.0" > €</td>
	  		</tr>
	  		<tr>
	  			<td>Shipping</td>
	  			<td><input type="text" class="shipping input" value="30.0" > €</td>
	  		</tr>
	  		<tr>
	  			<td>VAT</td>
	  			<td><input type="text" class="vat input" value="22" disabled> %</td>
	  		</tr>
	  		<tr>
	  			<td><strong>Grand Total</strong></td>
	  			<td><strong><input type="text" class="grandTotal input" value="0.0" disabled> €</strong></td>
	  		</tr>
	  	</table>
	  </div>

Answer 3

The only thing you need to do is change .val() function with .text().

.val() will work fine with combobox, textboxes etc. If you want to get the text use .text().

Before doing mathematical operations convert the text to number. For that you can use parsefloat() or parseInt() methods.

Answer 4

For select span value, you need to use "text()", then replace

var price = $(this).find('.price').val();

By :

var price = $(this).find('.price').text();

Then :

 var shipping = $(this).find('.shipping').val();
 var total = $(this).find('.total').val();
 var vat = $(this).find('.vat').val();

You don't need to use $(this) here, just remove and use selector as follow :

 var shipping = $('.shipping').val();
 var total = $('.total').val();
 var vat = $('.vat').val();

And at the end, add parseFloat :

 var ship_amount = parseFloat(total_shipping+vat_amount);

otherwise he just concat as a string.

Working example

Answer 5

Can you try this???

 $(document).ready(function(){

            update_amounts();
            $('.qty').change(function() {
                update_amounts();
            });
        });

function update_amounts()
        {
            var sum = 0.0;
            $('#myTable > tbody  > tr').each(function() {
                var qty = $(this).find('option:selected').val();

                var price = $(this).find('.price').html();

                var amount = (qty*price)

                sum+=amount;
            console.log("sum"+sum)
                $('.amount').html(''+amount);

            });
            //calculate the total to sum  
            $('.total').val(sum);
            //calculate total + shipping and add VAT
            var shipping = $('.shipping').val();

            var total = $('.total').val();

            var vat = $('.vat').val();

            //calculate vat
            var vat_amount = ((total, 10) * 100);

            //calculate grand total
            var total_shipping = (total+shipping);

            var ship_amount = (total_shipping+vat_amount);

            sum+=ship_amount;
            $('.grandTotal').val(sum);

        }