This is a topic that I find people are looking to do all the time. Â Here is a solution that works and is fairly simple. Â This even takes into account that you might want to maintain the text value of the field option to place into your database. So first we need to build javascript that will hand the math.
// This first function is just a rounding function that can be applied to the dollar amount once calculated
function toDecimal2(number){
var number = Math.round(number*100).toString();
number = number.substring(0,number.length-2)+'.'+
number.substring(number.length-2,number.length);
if(number == 0){ number = '0.0' };
return number;
}
// This function gets the form values that need to be calculated
function totalpricereg(form) {
var a = parseFloat(form.option1Amount.value, 10);
var b = parseFloat(form.option2Amount.value, 10);
var c = parseFloat(form.option3Amount.value, 10);
// This adds up the values
TotalPrice = (a + b + c);
form.amount.value = toDecimal2(TotalPrice);
}
Now we can build the HTML Form. We simply use hidden fields that get the dollar amounts from the radio selections and are able to maintain a text value for the database to identify what was purchased.
<form name="form" action="/path/to/your/form/processor" method="post">
Price Option 1
<input type="radio" name="option1" value="TEXT_Value_For_Database" onchange="this.form.option1Amount.value=10;">
<input type="radio" name="option1" value="TEXT_Value_For_Database" onchange="this.form.option1Amount.value=20;">
<input type="radio" name="option1" value="TEXT_Value_For_Database" onchange="this.form.option1Amount.value=30;">
<input type="hidden" value="0" name="option1Amount">
Price Option 2
<input type="radio" name="option2" value="TEXT_Value_For_Database" onchange="this.form.option2Amount.value=40;">
<input type="radio" name="option2" value="TEXT_Value_For_Database" onchange="this.form.option2Amount.value=50;">
<input type="radio" name="option2" value="TEXT_Value_For_Database" onchange="this.form.option2Amount.value=60;">
<input type="hidden" value="0" name="option2Amount">
Price Option 3
<input type="radio" name="option3" value="TEXT_Value_For_Database" onchange="this.form.option3Amount.value=10;">
<input type="radio" name="option3" value="TEXT_Value_For_Database" onchange="this.form.option3Amount.value=20;">
<input type="radio" name="option3" value="TEXT_Value_For_Database" onchange="this.form.option3Amount.value=30;">
<input type="hidden" value="0" name="option3Amount">
We now can apply the javascript to the "calculate button"
<input type="button" onClick="totalpricereg(this.form)" value="Calcuate Total"></div><div>$<input name="amount" type="text" size="10" readonly>
</form>
Matthew A Price
^