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:

HTML
Code:
<div id="left" style="float:left;padding:20px;width:250px;">
	<h2>Appetisers</h2>
	
	
	<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><!--item-->
	
	
	<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><!--item-->
	
	
	<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><!--item-->
	
	
	<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><!--item-->
	
	
	
</div><!--left-->
<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><!--your-order-->
	<div class="subtotal"><p></p></div>
</div><!--right-->
jQuery
Code:
$(document).ready(function(){
	$('.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
		    $(user_clone).removeClass('innertxt');
		    $(user_clone).removeClass('selected');
		    $(user_clone).addClass('added');
		    
		    $('#your-order').append(user_clone);
		    // $(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.