Calculate prices to subtotal with jQuery

Hi All,

I am trying to set up a simple menu, with the ability for users to add items to their order.

Each item has a price, and I am trying to set it up so that when they add an item to their order, it automatically calculated and updates the subtotal.

The page so far is: Title

I can’t get the sub-total to update at all. Is there anyone who can advise me on what I am doing wrong?

The code I am using currently is:


<div id="left" style="float:left;padding:20px;width:250px;">
	<div id="item1" userid="1" class="itemcontent">
		<h4>Sesami prawn toast</h4>
		<p>Toast with sesami and prawns on it</p>
		<p class="price">3.00</p>
		<input type="submit" id="add1" value="1">Add to your order</input>
	<div id="item2" userid="2" class="itemcontent">
		<h4>Curry puffs</h4>
		<p>A tasty savoury curry snack &ndash; in pastry. Not spicy.</p>
		<p class="price">4.20</p>
		<input type="submit" id="add2" value="2">Add to your order</input>
	<div id="item3" userid="3" class="itemcontent">
		<h4>Prawn Crackers</h4>
		<p>Savoury, prawn fried cracker things</p>
		<p class="price">1.40</p>
		<input type="submit" id="add3" value="3">Add to your order</input>
	<div id="item4" userid="4" class="itemcontent">
		<h4>Vegetable spring rolls</h4>
		<p>Spring rolls filled with&hellip; vegetables.</p>
		<p class="price">3.10</p>
		<input type="submit" id="add4" value="4">Add to your order</input>
<div id="right" style="float:left;padding:20px;width:250px;">
	<h2>Construct your order</h2>
	<p>To choose what you would like, browse the menu to the left, and add items to your order. They will appear below. Your order total will be calculated for you.</p>
	<p>No delivery is charged on orders over &pound;10.</p>
	<p>When you are ready, please phone through your order, note we do not support online ordering</p>
	<div id="your-order">
	<div class="subtotal"><p></p></div>


	$('.itemcontent input').click(function() { // When user clicks the add item link
		var userid = $(this).val(); // get the userid value from the div
		$('#item' + userid).toggleClass('selected'); // insert the class selected to div with id of item + value (taken from #user and userid value (1)
	$(".itemcontent input").click(function() { //when the add button is clicked
		//var users = $('#selected_users .innertxt2').size(); // Get the number of selected users?
		//var selected_users = $('#all_users .innertxt_bg').size(); // Get the number of selected users?
		//if (users + selected_users > 100) { // if there are more then 5 selected
		//    alert('You can only chose maximum 5 users.'); // alert the user that they can only choose 5
		//    return;
		$('#left .selected').each(function() { // #left .selected - on click
		    var user_id = $(this).attr('userid'); // set the variable user_id to the attribute of userid, eg: 1
		    $('#add' + user_id).each(function() {this.checked = false;}); // #select+(variable_ eg #select1 function = unchecked
		    var user_clone = $(this).clone(true); 
		    $('#item' + user_id).removeClass('selected'); // remove class selected to prevent it being re-added when another button is clicked
		    // $(this).remove(); this removes the original
	// Calculate the sub-total for the order
	var runningTotal = 0;
	$('#your-order .price').each (function () {
		runningTotal += ($(this).html () * 1); // The multiply forces a typecast from string to a number type
	$('.subtotal p').html (runningTotal);

Thank you very much.

It’s not something obvious like the space in “#your-order .price” is it?

(I am new to this so this may be irrelevant)

Update: It’s not that simple.

Hi droopsnoot, no it’s nothing to do with that :frowning: