PDA

View Full Version : Dynamic Quote Calculator

mstudi
08-30-2006, 04:55 AM
Hi, I'm relavtively new and haven't been able to find quite what I need to do the following, is anyone able to help?

I need to build an online calculator for various clothing items. One calculator for female clothing, and one for male.

What I'd like are three drop down menus containing various pre-assigned numeric values that, when selected, determine the TOTAL.

The first would be the item. An example of an item would be a two-clor jacket. 'Jacket' would have a value of 150.

The next two options would be base color and trim. Each clothing item uses a different amount of base color and trim and it gets tricky there. 'Jacket' uses 6 base, and 2 trim. There would hopefully be 17 color options in each drop-down. Each clothing item/color has a different value that changes every now and then, so hopefully the script can be written in a way that updating the prices isn't too difficult.

If it's easier to do this with radio buttons, that is still fine.

The value is then determined by 'Jacket' + 'Color1' +'Color2' which in the case of 'Jacket, is 6 x color1, 2 x color2.

This is probably impossible, but I also have images of every clothing item in every color combination, and it would be awesome if it could appear along side the quote. They are titled as "JacketCol1ACol2A" but can easily be renamed.

It's hoped that the form wouldn't display a quote/image until the "Get Quote" button was clicked.

So far I've only been able to track down various calculating scripts and try to extract different components from each, unfortunately with no luck.

Help is very much appreciated.

jmrker
08-30-2006, 06:25 AM
Here's a start you can work from: :thumbsup:

<html>
<title>Dynamic Calculator</title>
<script type="text/javascript">
<!--
var costjacket = new Array(0,50,75,99.99,150,200); // cost of jackets
var costcolors = new Array(0,50,45,40,35,30); // extra color costs
var costtrim = new Array(0,9.99,19.99); // trim cost modifiers

function Calc() {
var total = 0;
var objac = document.getElementById('jacket');
var obcolor = document.getElementById('color');
var obtrim = document.getElementById('trim');

var j = objac.options[objac.selectedIndex].value;
var c = obcolor.options[obcolor.selectedIndex].value;
var t = obtrim.options[obtrim.selectedIndex].value;

total = parseFloat(costjacket[j])+parseFloat(costcolors[c])+parseFloat(costtrim[t]);
document.getElementById('Total').value = total.toFixed(2);
document.getElementById('picscode').value = 'J'+j+'C'+c+'T'+t;
}
//-->
</script>
<body>
<center>
<h1>Clothing Calculator</h1>

<select id="jacket">
<option value="1">Jacket 1</option>
<option value="2">Jacket 2</option>
<option value="3">Jacket 3</option>
<option value="4">Jacket 4</option>
<option value="5">Jacket 5</option>
</select>

<select id="color">
<option value="1">Red</option>
<option value="2">Yellow</option>
<option value="3">Green</option>
<option value="4">Blue</option>
<option value="5">Indigo</option>
</select>

<select id="trim">
<option value="1">Trim 1</option>
<option value="2">Trim 2</option>
</select>

<button onClick="Calc()">Calculate</button>
Total: <input id="Total" type="text" value="">
<div id="images">
Image Code: <input type="text" id="picscode" value="" size="5"><br />
<img id="pics" src="jct" alt="Many choices in Clothing">
</div>
</center>
</body>
</html>

You'll need to modify the image display as desired.
You can add the extra code for the male/female line with some more modifications to the code.

mstudi
08-30-2006, 02:27 PM
Hey, that's excellent thank you(Thank you so much)! Only problem is I cannot get it to display the images. Any ideas where I could be going wrong?

jmrker
08-30-2006, 02:36 PM
I don't have any clothing pictures.
Post a site where they may be viewed and also post what you have written already.

mstudi
08-30-2006, 03:02 PM
I've set up the folowing page: http://my-starr.net/pricing/index2.htm and started off with a simplified version of the code using just one color. The images for this particular script are in the /pricing directory as C1 - c17.gif and I *think* I've correctly modified the script to reflect this.

<html>
<title>Dynamic Calculator</title>
<script type="text/javascript">
<!--
var costcolors = new Array(0,3*182,3*32,3*44,3*3200,3*128,3*74,3*199,3*270,3*553,3*240,3*117,3*129,3*84,3*90,3*210,3*442, 3*31); // color one

function Calc() {
var total = 0;

var obcolor = document.getElementById('color');

var c = obcolor.options[obcolor.selectedIndex].value;

total = parseFloat(234)+parseFloat(costcolors[c]);
document.getElementById('Total').value = total.toFixed(0);
document.getElementById('picscode').value = 'C'+c;
}
//-->
</script>
<body>
<p align="left">&nbsp;</p>
<p align="left"><font face="Arial"> &nbsp;</font></p>
<p>&nbsp;</p>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="437" id="AutoNumber1">
<tr>
<td width="28" rowspan="2">
<p dir="ltr"><font size="2" face="Arial">
BOOTS<br>
<img id="pics" src="C" alt="Boots" width="74" height="74"></font></td>
<td width="409">

<font face="Arial">

<select id="color">
<option value="1">Red</option>
<option value="2">Tan</option>
<option value="3">White</option>
<option value="4">Black</option>
<option value="5">Grey</option>
<option value="6">Yellow</option>
<option value="7">Pink</option>
<option value="8">Violet</option>
<option value="9">Purple</option>
<option value="10">Navy</option>
<option value="11">Blue</option>
<option value="12">Aqua</option>
<option value="13">Lime</option>
<option value="14">Green</option>
<option value="15">Orange</option>
<option value="16">Maroon</option>
<option value="17">Brown</option>
</select></font>

<button onClick="Calc()">Calculate</button>
</td>
</tr>
<tr>
<td width="409">
<p align="left">

<br>
Total: <input id="Total" type="text" value="" size="20">
<div id="images">
<br>
Image Code: <input type="text" id="picscode" value="" size="5"><br />
&nbsp;</div>
</center>
</table>
</body>
</html>

jmrker
08-30-2006, 04:19 PM
Here are some starting changes:

1. Alter the initial display to:

<img id="pics" src="C1.gif" alt="Boots" width="74" height="74"></font></td>

so that the initial choice matches the initial image

2. In the Calc() section, add the image display change

document.getElementById('picscode').value = 'C'+c+'.gif';
document.getElementById('pics').src = 'C'+c+'.gif';

You can 'hide' or delete the 'picscode' display as I put it in for testing only when I did not have images to display.

I'm sorry, but I don't understand the purpose of:
var costcolors = new Array(0,3*182,3*32,3*44,3*3200,3*128,3*74,3*199,3*270,3*553,3*240,3*117,3*129,3*84,3*90,3*210,3*442, 3*31); // color one
Why multiply by 3 instead of entering the number directly?
I'm sure you have a reason, but I don't see it.
If you plan on changing the mark-up, you might want to make the multiplier a variable instead so that you don't make so many changes with that many more opportunities to make a typing mistake.

mstudi
08-31-2006, 01:00 AM
Hey,

This works like a dream.:D Thank you very much. I can get to work on all the items now. The reason for the 3* applying to each cloth colour is because each item uses a different amount of each color. It helps me see to see the raw cloth value rather than the multiplied result and make sure it's correct in the code. I'm not sure how to include the multiplication as a variable.

jmrker
08-31-2006, 03:06 AM

Just a suggestion: :)

You can create another array of color multipliers for each of the 17 colors.
Then using the same index value, multiply in real time with the associated value.

As in:

var costcolors = new Array(0,3*182,3*32,3*44,3*3200,3*128,3*74,3*199,3*270,3*553,3*240,3*117,3*129,3*84,3*90,3*210,3*442, 3*31); // color one

var costcolors = new Array(0,182,32,44,3200,128,74,199,270,553,240,117,129,84,90,210,442,31); // color one
var multcolors = new Array (0,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3); // multipliers

Then change the Calc() function like this:

total = parseFloat(234)+(parseFloat(costcolors[c])*parseFloat(multcolors[c]));

Note that you can also use decimal values for the multiplier and/or the color costs arrays.
The toFixed() function adjusts the total value to 2 decimals.

darknailblue
09-08-2006, 03:11 AM
How would this be accomplished using radio buttons? I have no effing clue and tried it this way and for some reason it doesn't work.

~darknailbue