Auto Update Price Based On Form Fields

JavaScript
1

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 apple.com 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!

-Ryan

2 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<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 || e.target;
if(e.type=='click' && target.type=='checkbox') { //clicked a checkbox
    var cost = document.getElementById('cost');
    var extra = parseFloat(target.value);
    cost.firstChild.data = (parseFloat(cost.firstChild.data) + ((target.checked)? extra : -extra)).toFixed(2);
    }
}
</script>

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

</head>
<body>
<form action="#" method="" name="form">
<p>Vacuum cleaner $<span id="cost">100</span></p>
<fieldset><legend>extras</legend>
<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>
</fieldset>
</form>
</body>
</html>