Auto Update Price Based On Form Fields

Hello Everyone,

I am more of a front end guy with experience in xhtml/css and want to get my hands dirty with some back-end programming (Javascript/jQuery/AJAX/PHP) and was wondering about a specific task involving (mainly) what I would believe is AJAX.

I was wondering if there is a way to have a page with a starting price of $299 (lets say a basic vacuum) then below that are 20 or so customizable add-ons to choose from through simple checkboxes. That (to me) should be easy enough, but I would love to have the grand total at the bottom of the page be updated in real time as the user checks or unchecks certain add-ons (kind like how does it).

What is a good starting point for this, and would it be possible to send out the order as an email with the total price sent to the business owner.

Like I said, I can sorta get my way around this stuff, I am just looking for some great resources, or a good starting point. Any help is much appreciated. Thanks!


<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
window.onload=function() {
document.getElementsByTagName('fieldset')[0].onclick = totalizer;

function totalizer(e) {
var e = e? e : window.event;
var target = e.srcElement ||;
if(e.type=='click' && target.type=='checkbox') { //clicked a checkbox
    var cost = document.getElementById('cost');
    var extra = parseFloat(target.value); = (parseFloat( + ((target.checked)? extra : -extra)).toFixed(2);

<style type="text/css">
* {margin:0;padding:0;}
fieldset {width:7em; padding:1em;}
label {display:block; text-align:right;}

<form action="#" method="" name="form">
<p>Vacuum cleaner $<span id="cost">100</span></p>
<label>bags $5 <input type="checkbox" name="bags" value="5"></label>
<label>hose $19.95 <input type="checkbox" name="hose" value="19.95"></label>
<label>nozzle $10 <input type="checkbox" name="nozzle" value="10"></label>