Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.

1. ## Dynamic Quote Calculator

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.

• ## A start

Here's a start you can work from:

PHP Code:
``` <html> <head> <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> </head> <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.

• 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?

• I don't have any clothing pictures.
Post a site where they may be viewed and also post what you have written already.

• 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>

• Here are some starting changes:

1. Alter the initial display to:
PHP Code:
``` <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
PHP Code:
```   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.

• Hey,

This works like a dream. 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.

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:
PHP Code:
``` 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  ```
PHP Code:
``` 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:
PHP Code:
```  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.

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

•

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•