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
<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 – 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… 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 £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
$(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.
