Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.
    Last edited by mstudi; 08-30-2006 at 04:01 AM.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up 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 
    objac.options[objac.selectedIndex].value;
      var 
    obcolor.options[obcolor.selectedIndex].value;
      var 
    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.

  • #3
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts
    I don't have any clothing pictures.
    Post a site where they may be viewed and also post what you have written already.

  • #5
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>
    <head>
    <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>
    </head>
    <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>

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts
    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.

  • #7
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up Your welcome.

    Glad I could help.

    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*4423*31); // color one 
    Instead use:
    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.

  • #9
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Radio Buttons?

    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
    •