Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jquery realtime order form - change form elements depending on selection

    Hello

    I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page:
    http://www.watphotos.com/introductio...otography.html

    And here is the code in question:

    Code:
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
    <script type="text/javascript" charset="utf-8"> 
     $(document).ready(function(){
    	var initial	= 0
    	var total = 0;
    	var services = 0;
    	function addServices()
    	{
    		initial = 150
    		total = initial
    		services = 0;
    		$("input:checked").each(function(){
    			value = $(this).attr("value");		
    			services += parseInt(value);
    		});
    	}
    	$(function()
    	{
    		addServices();
    		total += services;
    		$("form").before('<p class="price"></p>')		
    		$("p.price").text("Total Price: US$" + total);
    	});
     	$("input:radio, input:checkbox").click(function () {
    		addServices();
    		total += services
    		$("p.price").text("Total Price: US$" + total);
        });
     
     });
     
    </script>

    I have two questions...

    Question 1
    How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky.
    I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this?

    Question 2
    The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document?

    Thanks in advance!

  • #2
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bump. Can anybody help me please?

  • #3
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    I'd do it a little differently.

    The first group of radios is the number of people attending, right?

    Then you've got a basic cost per person for the tutorial. And the other radios all carry a cost per person for each of those additional services.

    So amend your form values to represent that:

    Code:
    <label><input type="radio" name="pax" value="1" id="pax_0" checked />Private Tuition</label> <!-- 1 person -->
    <label><input type="radio" name="pax" value="2" id="pax_1" />2 People/Couple</label><!-- 2 people -->
    
    <!-- etc etc... -->

    Give all the other ones the cost per person for that service:

    Code:
    <label><input type="radio" name="lunch" value="5" id="eggsanger" checked />Egg &amp; Salad Sandwiches + Soft Drink)</label>
    <label><input type="radio" name="lunch" value="8" id="steakbaguette" />Steak &amp; Cheese Baguette + Beer</label>
    
    <label><input type="radio" name="transport" value="0" id="pax_0" checked />Motorbike Pillion (1-on-1 only)</label>
    <label><input type="radio" name="transport" value="20" id="pax_1" />Tuk Tuk</label>
    Then your JS can work out the total costs for each service based on the number of people attending:

    Code:
    <script type="text/javascript">
    
    function calc_total(){
    	
    	var total_people = $('input[name=pax]:checked').val();
    	
    	var tutorial_cost_pp	= 10 // per person
    	var lunch_cost_pp	= $('input[name=lunch]:checked').val();
    	var transport_cost_pp	= $('input[name=transport]:checked').val();
    	
    	var tutorial_total	= total_people * tutorial_cost_pp;
    	var lunch_total		= total_people * lunch_cost_pp;
    	var transport_total	= total_people * transport_cost_pp;
    	
    	var grand_total = tutorial_total + lunch_total + transport_total;
    	
    	return grand_total;
    }
    
    $(function(){
    	
    	$('input[type=radio]').click(function(){
    		$('#grand_total').text(calc_total());
    	});
    
    });
    
    </script>
    As for the second bit - just put your
    Code:
    <p id="grand_total"></p>
    at the end of the form, or wherever in the HTML you want it.

    Make sense?

  • #4
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much, it does make sense and I've got everything working except one thing.

    Check out lines 28 and 29 here:
    http://www.watphotos.com/introductio...otography.html

    I didn't think simple addition could produce such results. Clearly I'm missing something.


  •  

    Posting Permissions

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