Hi All,
Let me start by saying... I'm a newb!
I was searching the web for a simple price calculator that I could apply to a forms page that I am creating. On this forum, I found a great post by Paul Davis (willcode4beer) where Paul helped someone who was trying to make a calculator for a custom made wooden frame. I have edited that script slightly to suite my needs, but there is one more thing I'm trying to do that I can't quite get done.
---------------------------
Here is a copy of what I have that works well just as it is.
---------------------------
HTML Code:
<html>
<head>
<title>Price Calculator</title>
<style type="text/css">
label {
display: block;
float: left;
width: 6em;
}
</style>
<script type="text/javascript">// <![CDATA[
var baseFee = 10;
var assemblyFee = 5;
function calculate_total(formObj){
var baseFee = new Number(formObj.baseFee.value);
var assemblyFee = new Number(formObj.assemblyFee.value);
var select01 = 0;
var opts01 = formObj.partSelect01.options;
/* Find the value of the selected option */
for(var i=0; i<opts01.length;i++){
if(opts01[i].selected){
select01 = new Number(opts01[i].value);
}
}
/* Calculating Total*/
var basePrice = baseFee + select01;
var price = basePrice + assemblyFee;
formObj.total.value = price;
}
// ]]></script>
</head>
<body>
<form name="calc" id="calc">
<div>
<label for="baseFee">Base Fee:</label>
<input type="text" name="baseFee" value="10" disabled="disabled"/>
</div>
<div>
<label for="partSelect01">Part Select 01</label>
<select name="partSelect01" onchange="calculate_total(this.form)">
<option value="0" selected>Select your part</option>
<option value="10.00">Part Option 1 [10.00]</option>
<option value="20.00">Part Option 2 [20.00]</option>
<option value="30.00">Part Option 3 [30.00]</option>
</select>
</div>
<div>
<label for="assemblyFee">Assembly Fee:</label>
<input type="text" name="assemblyFee" value="5.00" disabled="disabled"/>
</div>
<div>
<label>Total:</label>
<input id="total" name="total" value="15"/>
</div>
</form>
</body>
</html>
-----------------------------------
Now, Here is my problem. When I try to add multiple drop down boxes, then edit the script to also calculate these new options it doesn't work.
Also, Please note that in the future I could potentially have 10-20 drop down options that I will want to add in.
-----------------------------------
HTML Code:
<html>
<head>
<title>Price Calculator 2</title>
<style type="text/css">
label {
display: block;
float: left;
width: 6em;
}
</style>
<script type="text/javascript">// <![CDATA[
var baseFee = 10;
var assemblyFee = 5;
function calculate_total(formObj){
var baseFee = new Number(formObj.baseFee.value);
var assemblyFee = new Number(formObj.assemblyFee.value);
var select01 = 0;
var opts01 = formObj.partSelect01.options;
/* Find the value of the selected option */
for(var i=0; i<opts01.length;i++){
if(opts01[i].selected){
select01 = new Number(opts01[i].value);
var select02 = 0;
var opts02 = formObj.partSelect02.options;
/* Find the value of the selected option */
for(var x=0; x<opts02.length;x++){
if(opts02[x].selected){
select02 = new Number(opts02[x].value);
var select03 = 0;
var opts03 = formObj.partSelect03.options;
/* Find the value of the selected option */
for(var y=0; y<opts03.length;y++){
if(opts03[y].selected){
select03 = new Number(opts03[y].value);
}
}
/* Calculating Total*/
var basePrice = baseFee + select01 + select02 + select03;
var price = basePrice + assemblyFee;
formObj.total.value = price;
}
// ]]></script>
</head>
<body>
<form name="calc" id="calc">
<div>
<label for="baseFee">Base Fee:</label>
<input type="text" name="baseFee" value="10" disabled="disabled"/>
</div>
<div>
<label for="partSelect01">Part Select 01</label>
<select name="partSelect01" onchange="calculate_total(this.form)">
<option value="0" selected>Select your part</option>
<option value="10.00">Part Option 1 [10.00]</option>
<option value="20.00">Part Option 2 [20.00]</option>
<option value="30.00">Part Option 3 [30.00]</option>
</select>
</div>
<div>
<label for="partSelect02">Part Select 02</label>
<select name="partSelect02" onchange="calculate_total(this.form)">
<option value="0" selected>Select your part</option>
<option value="10.00">Part Option 1 [10.00]</option>
<option value="20.00">Part Option 2 [20.00]</option>
<option value="30.00">Part Option 3 [30.00]</option>
</select>
</div>
<div>
<label for="partSelect03">Part Select 03</label>
<select name="partSelect03" onchange="calculate_total(this.form)">
<option value="0" selected>Select your part</option>
<option value="10.00">Part Option 1 [10.00]</option>
<option value="20.00">Part Option 2 [20.00]</option>
<option value="30.00">Part Option 3 [30.00]</option>
</select>
</div>
<div>
<label for="assemblyFee">Assembly Fee:</label>
<input type="text" name="assemblyFee" value="5.00" disabled="disabled"/>
</div>
<div>
<label>Total:</label>
<input id="total" name="total" value="15"/>
</div>
</form>
</body>
</html>
----------------------------------
Got any ideas? Am I close or am I way off base on how to do this?
Any help would be greatly appreciated.
Thank You for your time.
Bernie
Last edited by chrishirst; 12-12-2009 at 05:46 PM..
Reason: delimiters added
|
