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/introduction-to-photography.html

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">
$(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!

Bump. Can anybody help me please?

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

$(function(){

$('input[type=radio]').click(function(){
$('#grand_total').text(calc_total());
});

});

</script>

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?

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/introduction-to-photography.html

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