Okey doke, I've fixed you up a version 3.0, in which, when the cloth checkbox is checked, the default price is 50$, which changes when you change the size of the surfboard. I've done this using a switch statement:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Surfboard Form</title>
<script type="text/javascript">
//Set up an associative array
var surf_prices = new Array();
surf_prices["good"]=100;
surf_prices["pretty"]=200;
surf_prices["very"]=300;
surf_prices["epic"]=1000;
//Set up an associative array
//We use this this array when the user selects a size from the form
var size_prices= new Array();
size_prices["None"]=0;
size_prices["5 ft"]=100;
size_prices["6 ft"]=150;
size_prices["7 ft"]=200;
size_prices["8 ft"]=250;
size_prices["9 ft"]=300;
// getsurfboardPrice() finds the price based on the size of the Surfboard.
function getsurfboardPrice()
{
var surfboardPrice=0;
//Get a reference to the form id="Surfboardform"
var theForm = document.forms["surfboardForm"];
//Get a reference to the Surfboard the user Chooses name=selectedsurf":
var selectedsurf = theForm.elements["selectedsurf"];
//Here since there are 4 radio buttons selectedsurf.length = 4
//We loop through each radio buttons
for(var i = 0; i < selectedsurf.length; i++)
{
//if the radio button is checked
if(selectedsurf[i].checked)
{
//set surfboardPrice to value of elected radio button
// using the surf_prices array
//We get the selected Items value
surfboardPrice = surf_prices[selectedsurf[i].value];
//If we get a match then we break out of this loop
//No reason to continue if we get a match
break;
}
}
//return surfboardPrice
return surfboardPrice;
}
//This function finds the size price based on the
//drop down selection
function getSurfSize()
{
var surfSizePrice=0;
//Get a reference to the form id="Surfboardform"
var theForm = document.forms["surfboardForm"];
//Get a reference to the select id="size"
var selectedsize = theForm.elements["size"];
//set Surfboardsize Price equal to value user chose
surfSizePrice = size_prices[selectedsize.value];
var clothPrice=0;
//Get a reference to the form id="Surfboardform"
var theForm = document.forms["surfboardForm"];
//Get a reference to the checkbox id="includeCloth"
var includeCloth = theForm.elements["includeCloth"];
//If they checked the box set cloth to 50
if(includeCloth.checked==true)
{
switch(surfSizePrice){
case size_prices["5 ft"]:
clothPrice = 50
break;
case size_prices["6 ft"]:
clothPrice = 100
break;
case size_prices["7 ft"]:
clothPrice = 150
break;
case size_prices["8 ft"]:
clothPrice = 200
break;
case size_prices["9 ft"]:
clothPrice = 250
break;
default:
clothPrice = 50
break;
}
}
//return clothPrice
return clothPrice;
surfSizePrice += clothPrice;
// return surfSizePrice
return surfSizePrice;
}
//footstrapPrices() finds foot strap price based on a check box selection
function footstrapPrices()
{
var footstrapPrice=0;
//Get a reference to the form id="Surfboardform"
var theForm = document.forms["surfboardForm"];
//Get a reference to the checkbox id="includeFootStrap"
var includeFootStrap = theForm.elements["includeFootStrap"];
//If they checked the box set footstrapPrice to 5
if(includeFootStrap.checked==true)
{
footstrapPrice = 50;
}
//return footstrapPrice
return footstrapPrice;
}
function insciptionPrice()
{
//This local variable will be used to decide whether or not to charge for the inscription
//If the user checked the box this value will be 20
//otherwise it will remain at 0
var inscriptionPrice=0;
//Get a refernce to the form id="Surfboardform"
var theForm = document.forms["surfboardForm"];
//Get a reference to the checkbox id="includeinscription"
var includeInscription = theForm.elements["includeinscription"];
//If they checked the box set inscriptionPrice to 20
if(includeInscription.checked==true){
inscriptionPrice=20;
}
//return inscription price
return inscriptionPrice;
}
function calculateTotal()
{
//total price by calling functions
var SurfboardPrice = getsurfboardPrice() + getSurfSize() + footstrapPrices() + insciptionPrice();
//display result
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the Surfboard $"+SurfboardPrice;
}
function hideTotal()
{
var divobj = document.getElementById('totalPrice');
divobj.style.display='none';
}
</script>
</head>
<body onload='hideTotal()'>
<div id="wrap">
<form action="" id="surfboardForm" onsubmit="return false;">
<div>
<div class="cont_order">
<fieldset>
<legend>Get a Surfboard!</legend>
<label >Type of Surfboard:</label><br />
<label class='radiolabel'><input type="radio" name="selectedsurf" value="good" onclick="calculateTotal()" />good surfboard ($100)</label><br/>
<label class='radiolabel'><input type="radio" name="selectedsurf" value="pretty" onclick="calculateTotal()" />pretty good surfboard($200)</label><br/>
<label class='radiolabel'><input type="radio" name="selectedsurf" value="very" onclick="calculateTotal()" />very good surfboard($300)</label><br/>
<label class='radiolabel'><input type="radio" name="selectedsurf" value="epic" onclick="calculateTotal()" />epic surfboard ($1000)</label><br/>
<br/>
<label>size</label>
<select id="size" name='size' onchange="calculateTotal()">
<option value="None">Select size</option>
<option value="5 ft">5 ft($100)</option>
<option value="6 ft">6 ft($150)</option>
<option value="7 ft">7 ft($200)</option>
<option value="8 ft">8 ft($250)</option>
<option value="9 ft">9 ft($300)</option>
</select>
<br/>
<p>
<label for='includeFootStrap' class="inlinelabel">Include epic Footstrap($50)</label>
<input type="checkbox" id="includeFootStrap" name='includeFootStrap' onclick="calculateTotal()" />
</p>
<br/>
<p>
<label for='includeCloth' class="inlinelabel">Include cool cloth($50)</label>
<input type="checkbox" id="includeCloth" name='includeCloth' onclick="calculateTotal()" />
</p>
<p>
<label class="inlinelabel" for='includeinscription'>Include Inscription($20)</label>
<input type="checkbox" id="includeinscription" name="includeinscription" onclick="calculateTotal()" />
<input type="text" id="theinscription" name="theinscription" value="Enter Inscription" />
</p>
<div id="totalPrice"></div>
</fieldset>
</div>
<input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
</div>
</form>
</div><!--End of wrap-->
</body>
</html>