SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    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.

  2. #2
    SitePoint Evangelist
    Join Date
    Aug 2006
    Location
    Nantwich, Cheshire
    Posts
    409
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    http://www.firenza.net - my homage to a car from the 1970s

  3. #3
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by droopsnoot View Post
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •