jQuery: handling payment calculations in a shopping cart

Usually all payment calculations in a shopping cart are handled by a server-side language which fills out an HTML table with all the required numbers. For example, you have a table with some text inputs that allow the user to modify the quantity of his products. With jQuery, you can easily perform all these calculations (subtotal for example) without refreshing the page. Let's see how.

We have one of the most traditional shopping cart structures:

<form action="#" method="post" id="cart">

<table summary="Your cart">

  <caption>Your Cart</caption>
  
  <tr>
  
  	<th scope="col">Product</th>
  	<th scope="col">Quantity</th>
  	<th scope="col">Price</th>
  
  </tr>
  
  <tr>
  	<td>Product 1</td>
  	<td><input type="text" value="1" class="qty" /></td>
  	<td>3 USD</td>
  </tr>
  
  <tr>
  	<td>Product 2</td>
  	<td><input type="text" value="2" class="qty" /></td>
  	<td>5 USD</td>
  </tr>
  
  <tr>
  	<td>Product 3</td>
  	<td><input type="text" value="4" class="qty" /></td>
  	<td>3 USD</td>
  </tr>
  


</table>

<p><a href="#" id="calc">Subtotal</a> (without delivery charge)</p>

<div><input type="submit" value="Next step" id="next" name="next" /></div>
</form>

The inputs with the CSS class qty are contained within the cells that have as their nearest sibling the cell containing the price of singular products (also featuring the currency acronym). All we have to do is:

1. create a variable and initialize it to 0
2. loop through the inputs and get their value
3. multiply the retrieved value for the price contained in the nearest cell after sanitizing it from spaces and currency acronyms
4. add the result of this multiplication to the variable initialized earlier

Both input values and prices are strings, so we have to convert them to numbers before doing any maths. Later we'll convert this value back to string to insert it into the page. Let's see the code:

var Cart = {


   qtyFields: $('input.qty', '#cart'),
   triggerBtn: $('#calc'),
   
   calculate: function() {
   
     var total = 0;
     
     this.qtyFields.each(function() {
     
       var field = $(this);
       var amount = field.parent().next().text();
       var amountR = amount.replace(/\s+/g, '').replace(/USD/, '');
       var n1 = new Number(field.val());
       var n2 = new Number(amountR);
       
       var sum = n1 * n2;
       
     
       total += sum;
     
     });
   
     return (total.toString() + ' USD');
   },
   
   trigger: function() {
   
     this.triggerBtn.click(function(event) {
     
       var subtotal = Cart.calculate();
       
       $('<strong/>').text(subtotal).
       appendTo($(this).parent());
     
       event.preventDefault();
     
     });
   
   
   },
   
   init: function() {
   
     this.trigger();
     
     $('#cart').submit(function(event) {
     
     
       event.preventDefault();
     
     });
   
   
   }

};

$(function() {

   Cart.init();
});

You can see the demo below.

Demo

Live demo