How to code an order form with postage options (radio buttons) that updates the total price instantly?

Your page updated : http://jsfiddle.net/Nmqbc/3/

$(":radio","form").change(function() {
	var t=0;
	$(":radio:checked","form").each(function(i, $radio) {
		t += $(this).prev("label").text().replace(/[^.\d]/g,"") * 100;
	});
	$("fieldset:last p", "form").text("£"+(t/100).toFixed(2));
});

Select allOpen in new window

I converted your html form values to  numbers

http://jsfiddle.net/Nmqbc/10/

var price=$("input[name='courierrepairprice']").val();
price = Number(price.replace(/[^0-9\.]+/g,""));
var postage_out=0;
var postage_in=0
$("input[name='outwardpostage']").change(function()
{
postage_out=$(this).val();
 tot_price=parseFloat(price,10)+parseFloat(postage_out,10)+parseFloat(postage_in,10)
 tot_price=tot_price.toFixed(2)

 $('.tot_price').text(tot_price);
});
$("input[name='returnpostage']").change(function()
{
 postage_in=$(this).val();   
 tot_price=parseFloat(price,10)+parseFloat(postage_out,10)+parseFloat(postage_in,10)
 tot_price=tot_price.toFixed(2)
 $('.tot_price').text(tot_price);
});

Select allOpen in new window

<form action="couriermailer.php" method="post" name="courierform" id="courierform">
      
        <fieldset>
        
          <legend>Repair details</legend>
          <label for="courierrepairtitle">Repair</label>
          <input name="courierrepairtitle" type="text" id="courierrepairtitle" maxlength="200" value="Repair Title" readonly >
          <label for="courierrepairconsole">Console</label>
          <input name="courierrepairconsole" type="text" id="courierrepairconsole" maxlength="200" value="Console"  readonly >
          <label for="courierrepairprice">Price</label>
          <input name="courierrepairprice" type="text" id="courierrepairprice" maxlength="200" value="£49.50"  readonly >
          
        </fieldset>
        
        <fieldset class="postageoptions">
        
          <legend>Postage options</legend>
                   
          <span class="floatleft">
          <fieldset class="outwardpostage">
            
            <legend>Outward postage</legend>
          
            <label for="outwardpostageeconomy">Economy - £3.95</label>
            <input type="radio" name="outwardpostage" required value="3.95" id="outwardpostageeconomy">

            <label for="outwardpostagestandard">Standard - £7.95</label>
            <input name="outwardpostage" type="radio" required id="outwardpostagestandard" value="7.95">

            <label for="outwardpostagepremium">Premium - £11.95</label>
            <input type="radio" name="outwardpostage" required value="11.95" id="outwardpostagepremium">

            <label for="outwardpostagepostyourself">Post yourself</label>
            <input type="radio" name="outwardpostage" required value="0" id="outwardpostagepostyourself">

          </fieldset>
          </span>
            
          <span class="floatright">
          <fieldset class="returnpostage">
            
            <legend>Return postage</legend>
          
            <label for="returnpostageeconomy">Economy - £4.95</label>
            <input type="radio" name="returnpostage" required value="4.95" id="returnpostageeconomy">

            <label for="returnpostagestandard">Standard - £7.95</label>
            <input type="radio" name="returnpostage" required value="7.95" id="returnpostagestandard">

            <label for="returnpostagepremium">Premium - £11.95</label>
            <input type="radio" name="returnpostage" required value="11.95" id="returnpostagepremium">
            
          </fieldset>
          </span>
            
        </fieldset>
        
        <fieldset>
          <legend>Total price</legend>
            <p class="tot_price">DISPLAY TOTAL PRICE HERE</p>
          
        </fieldset>       

      </form>

Select allOpen in new window

Thanks for the quick reply leakim!

That's what I wanted but it doesn't take the price at the top of the form into account. How would I edit the code so it does?

Also if you could briefly annotate the code for me so I understand what's going on that would be perfect :-) but don't worry about it if you don't have time, I will award the points with or without the annotation.

That exactly what I wanted padas. Only 1 thing is missing - the £ sign on the total price. How would I add that into the code?

Also padas it would be great if the function ran as soon as the page loaded, so the price is shown straight away.

If you are using this in for an actual cart, you never want to rely on client side calculations.  Your serverside script should get the total by adding up all the line items, then add the postage items separately.  

If you are then using a payment system you will submit the total based on what you calculated client side.

Basic form error checking can be done client side.  However, you should do final error checking serverside.

Thanks for all the help! All working now :-)

I'm not using it for a cart as I don't take payment until the repair has been completed. It's just an order form that get's emailed to me, and I wanted the user to see a total price.

Just a quick question; are you allowed to take paid work through this website? I will be looking for someone to help me out with website development in the future.

We are not allowed to offer our services directly in any thread.  You can however, click on an expert's name and that will take you to their profile.  Then click on the About Me tab. If the expert has contact information available, you may then start a communication that way.