Creating a Simple Shopping Cart Application - Step 5 - Making the Order form dynamic

In the last post we created an order form based on the data which was stored in the cart from the session. On the form we included buttons which should allow us to increase or decrease the quantity of a particular item or remove the item altogether. In this post we will add jQuery and javascript code which will dynamically adjust the quantities of items on the form.

An important part of our original requirement is that the form would show the total quantity of items and the total cost of the order before the user submits. This poses an additional challenge when making the form dynamic as the total quantity and total cost of the order will also have to be re-calculated dynamically.

The following jQuery code which will be called when the add button is clicked should be added to the bottom of the view resources/views/scorders/checkout.blade.php - enclose this code in script tags

$(".btn.add").click(function () {
	var i=$(this).val();
	var row = $(this).closest('tr');
	var qty = row.find('.qty');
	var quantity = parseInt(qty.val());
	quantity = quantity + 1;
	var ttlQty = parseInt($('#ttlQty').text());
	ttlQty = ttlQty + 1;
	$('#ttlQty').text(ttlQty);
	$(qty).val(quantity);
	/*calcTotal();*/
});

You can now reload your page to try out this functionality. This code should work fine but it's useful to remember that when you are attempting to debug your javascript code in Google Chrome you can right-click on the page and select "inspect". Then click on the console tab and your error will be highlighted. In fact there are a wide range of developer tools and consoles available for debugging javascript that are worth exploring. I mention this here for those readers who may not be very familiar with javascript or jQuery.

Notice the last line of the function is commented out. This is to allow for the inclusion of call to a function calcTotal() which will re-calculate the total items and cost at the bottom of the page. The jQuery $('.btn.add').click() allows the function to be called whenever any of the elements which have that class are clicked. The function will then figure out which row was clicked through use of the jQuery closest() function.

Add the following code containing another jQuery function below your code for the add function but inside the script tags

$(".btn.subtract").click(function () {
	var i=$(this).val();
	
	var row = $(this).closest('tr');
	var qty = row.find('.qty');
	var quantity = parseInt(qty.val());
	if (quantity>1) {
		quantity = quantity - 1;
		var ttlQty = parseInt($('#ttlQty').text());
		ttlQty = ttlQty + 1;
		$('#ttlQty').text(ttlQty);
	}
	$(qty).val(quantity);
	/*calcTotal();*/
});

This code is almost identical to the code for the add button with the inclusion of a provision to make sure the quantity does not go below 1. The button to remove the row is already working as this code was included inline.

In order to display the total quantity and the total order cost we need to include place holders on the page for these values. Add the following html at the bottom of the view.