View Full Version : jquery realtime order form - change form elements depending on selection

08-25-2010, 04:03 AM

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:

And here is the code in question:

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



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!

08-27-2010, 03:43 AM
Bump. Can anybody help me please?

08-27-2010, 01:38 PM
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:

<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:

<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:

<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;





As for the second bit - just put your

<p id="grand_total"></p>
at the end of the form, or wherever in the HTML you want it.

Make sense?

08-30-2010, 05:12 AM
Thank you very much, it does make sense and I've got everything working except one thing.

Check out lines 28 and 29 here:

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