Menu
Hello,
I need some help with a head ache quote calculator. I was asked to redesign a website for a client which is all good and fine but they had a price quote calculator that they also needed updated. Here was the issue with the old calculator they had: it was made in flash and very difficult for them to edit. Plus for whatever reason it had not been working properly. It was designed over 6 years ago by a guy they can’t get in contact with anymore. So what they wanted was a new calculator that they could go in and edit without a headache, something that they could understand what to change if they needed (for instance cost of materials is always fluctuating). I took a look at the flash file but it wasn’t very helpful in designing this new calculator. So I figured it wouldn’t be too hard, and I’d learn from it as well so I took the job… May have bitten off a bit more than I can chew but I’m determined at this point to do this so I can learn, I would just like a little help. I’ve come up with two ways to do this, but I think for my sake and the clients sake the second one may be easier to work with.
First option:
[code]!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Untitled Document</title>
<script type=”text/javascript”>
var categories = [];
categories[“startList”] = [“Closed Louver”,”Open Louver”, “Raised Panel”,”Board and Batten”,”Bermuda”]
categories[“Closed Louver”] = [“None – 1 Panel”,”50/50 – 2 panel”,”60/40 – Larger top panel”,”40/60 – Larger bottom panel”,”33/33/33 – 3 panel”];
categories[“None – 1 Panel”] = [“Western Red Cedar”];
categories[“50/50 – 2 panel”] = [“Western Red Cedar”];
categories[“60/40 – Larger top panel”] = [“Western Red Cedar”];
categories[“40/60 – Larger bottom panel”] = [“Western Red Cedar”];
categories[“33/33/33 – 3 panel”] = [“Western Red Cedar”];
categories[“Western Red Cedar”] = [“1 3/8 inch”];
categories[“1 3/8 inch”] = [“0/8″,”1/8″,”1/4″,”3/8″,”1/2″,”5/8″,”3/4″,”7/8”];
categories[“0/8”] = [“0/8″,”1/8″,”1/4″,”3/8″,”1/2″,”5/8″,”3/4″,”7/8”];
categories[“1/8”] = [“0/8″,”1/8″,”1/4″,”3/8″,”1/2″,”5/8″,”3/4″,”7/8”];
categories[“1/4”] = [“0/8″,”1/8″,”1/4″,”3/8″,”1/2″,”5/8″,”3/4″,”7/8”];
categories[“3/8”] = [“0/8″,”1/8″,”1/4″,”3/8″,”1/2″,”5/8″,”3/4″,”7/8”];
categories[“1/2”] = [“0/8″,”1/8″,”1/4″,”3/8″,”1/2″,”5/8″,”3/4″,”7/8”];
categories[“5/8”] = [“0/8″,”1/8″,”1/4″,”3/8″,”1/2″,”5/8″,”3/4″,”7/8”];
categories[“3/4”] = [“0/8″,”1/8″,”1/4″,”3/8″,”1/2″,”5/8″,”3/4″,”7/8”];
categories[“7/8”] = [“0/8″,”1/8″,”1/4″,”3/8″,”1/2″,”5/8″,”3/4″,”7/8″];
var nLists = 6; // number of select lists in the set
function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/D/g,””));
for (i=step; i<nLists+1; i++) {
document.forms[‘quotecalculator’][‘List’+i].length = 1;
document.forms[‘quotecalculator’][‘List’+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement(‘option’);
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute(‘value’,nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}
function init() {
fillSelect(‘startList’,document.forms[‘quotecalculator’][‘List1’])
}
navigator.appName == “Microsoft Internet Explorer” ? attachEvent(‘onload’, init, false) : addEventListener(‘load’, init, false);
</script>
</head>
<body>
<form name=”quotecalculator” action=””>
<select name=’List1′ onchange=”fillSelect(this.value,this.form[‘List2′])”>
<option selected>Select A Shutter Style</option>
</select>
<select name=’List2’ onchange=”fillSelect(this.value,this.form[‘List3′])”>
<option selected>Mid Rail Divider</option>
</select>
<select name=’List3’ onchange=”fillSelect(this.value,this.form[‘List4′])”>
<option selected >Material</option>
</select>
<select name=’List4’ onchange=”fillSelect(this.value,this.form[‘List5′])”>
<option selected >Thickness</option>
</select>
<br />
<br />
<br />
<label>Quantity
<input type=”text” name=”Quantity” id=”Quantity” />
</label>
<label>Width
<input type=”text” name=”Width” id=”Width” />
</label>
<select name=’List5’ onchange=”fillSelect(this.value,this.form[‘List6′])”>
<option selected >Increments (in inches)</option>
</select>
x
<label>Height
<input type=”text” name=”Height” id=”Height” />
</label>
<p>
<select name=’List6’ onchange=”getValue(this.value, this.form[‘List2’].value,
this.form[‘List1’].value)”>
<option selected >Increments (in inches)</option>
</select>
<br />
<br />
<br />
</p>
</form>
</body>
</html>
If possible I would like to have the first option change all the other drop down options and not just the next one (then the next one, then the next one…).
I’ve tried a few different ways but nothing seems to work, for example:
[code]<select name=’List1′ onchange=”fillSelect(this.value,this.form[‘List2’, ‘List3’, ‘List4’])”>
<option selected>Select A Shutter Style</option>
I feel like I am going to run into problems doing it this way say if open louver and closed louver have the same mid rail divider options but the materials are different.
My second option is having the user select what style they want first on an html page and it brings them to a calculator specific to that style. So for closed louver:
[code]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Untitled Document</title>
</head>
<body>
<form id=”closedlouver” name=”closedlouver” method=”post” action=””>
<label>Mid Rail Divider
<select name=”midraildivider” id=”Mid Rail Divider”>
<option selected=”selected”>Select One</option>
<option>None – 1 Panel</option>
<option>50/50 – 2 Panel</option>
<option>60/40 – Larger Top Panel</option>
<option>40/60 – Larger Bottom Panel</option>
<option>33/33/33 – 3 Panel</option>
</select>
</label>
<label>Material
<select name=”material” id=”material”>
<option selected=”selected”>Select One</option>
<option>Western Red Cedar</option>
</select>
</label>
<label>Thickness
<select name=”thickness” id=”thickness”>
<option>Select One</option>
<option>1 3/8"</option>
</select>
</label>
<br /><br />
<label>Quantity
<input type=”text” name=”quantity” id=”quantity” />
</label>
<br /><br />
<label>Width
<input type=”text” name=”width” id=”width” />
</label>
<label>Increments
<select name=”widthincrements” id=”widthincrements”>
<option>Select One</option>
<option>0/8"</option>
<option>1/8"</option>
<option>1/4"</option>
<option>3/8"</option>
<option>1/2"</option>
<option>5/8"</option>
<option>3/4"</option>
<option>7/8"</option>
</select>
</label>
<label>Height
<input type=”text” name=”height” id=”height” />
</label>
<label>Increments
<select name=”heightincrements” id=”heightincrements”>
<option>Select One</option>
<option>0/8"</option>
<option>1/8"</option>
<option>1/4"</option>
<option>3/8"</option>
<option>1/2"</option>
<option>5/8"</option>
<option>3/4"</option>
<option>7/8"</option>
</select>
</label>
<br /><br />
Add-Ons (per pair)
<br /><br />
<label>
<input type=”checkbox” name=”priming” id=”priming” />
Priming $50</label>
<input type=”checkbox” name=”fauxtiltrods” id=”fauxtiltrods” />
Faux Tilt Rods $50</label>
<input type=”checkbox” name=”coppercaps” id=”coppercaps” />
Copper Caps $70</label>
<br /><br />
<input type=”checkbox” name=”horns” id=”horns” />
Horns $50</label>
<input type=”checkbox” name=”arches” id=”arches” />
Arches $150</label>
<br /><br /><br /><br />
<input type=”submit” name=”calculate” id=”calculate” value=”Calculate” />
</form>
</body>
</html>
Now for both of these heres the calculation I’m working with and I have no idea how to incorporate this in the js.
15” x 55” = 825 x 2 = 1650 divided by 144 = 11.46sf x $24 = $275.04/pair
W x H = whatevernumber x 2 = whatevernumber / 144 = numberofsquarefeet x costofstyle(flat rate for example closed louver is $24) = total price per pair.
All I need to know is how to calculate the total based on the specs the customer types in.
Thanks