I've created a form at http://www.sebdaconferences.org/reg_new.html

At the moment it just captures the data and sends a human-readable email response.

However, I now need to add some additional functionality to it. There is a "Total Cost" box at the bottom of the page which needs to automatically update as people select options.

I've added the following code into the <head>

Code:
<script type="text/javascript">
		function calculate() {
		var cost = preconf+predinner+preaccom+fullres+dayrates+dinner;
			document.booking.total.value=cost;
			}
		var preconf=0;
		var predinner=0;
		var preaccom=0;
		var fullres=0;
		var dayrates=0;
		var dinner=0;
		onload=calculate;
			</script>
document.booking.total.value points to the box at the end of the form where the total cost appears.

I then intended to set up the various radio button arrays and check boxes with the following:
Code:
onClick="preconf=80; calculate"
where 80 would be the price of the selected option, the idea being that as the user clicks on various options the Total Cost automatically recalculates and updates but the cost of each individual section of options defaults back to 0 if nothing has been checked.

So far I've only set up the first array of radio buttons, the ones that refer to the variable preconf, but it doesn't seem to be working. Does what I want make sense? And if so, where am I going wrong with the javascript?