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 6 of 6
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JS for Drop Down Box

    This is my second post on the subject as I believe my last post was a little convoluted and not well received, apologies.

    I am trying to build a configurator that will allow a salesman to custom pick components to make up a computer specification.
    The configurator is based upon radio buttons. As the specification is chosen the salesman can see onscreen the amended price and once they have finished they enter the customers details and all the information on screen is forwarded by email.

    The configurator can be viewed here

    http://www.real-timesolutions.co.uk/...figurator.html


    I have put together an array to handle the values of the radio buttons

    Code:
    var cpu_prices = new Array();
     cpu_prices["Core"]=0;
     cpu_prices["i5"]=42;
     cpu_prices["i7"]=113;
    
     var drive1_prices = new Array();
     drive1_prices["500GB"]=-20;
     drive1_prices["Core"]=0;
     drive1_prices["120SSD"]=20;
    
     var drive2_prices = new Array();
     drive2_prices["Core"]=0;
     drive2_prices["1TB"]=65;
     drive2_prices["2TB"]=82;
    
     var ram_prices = new Array();
     ram_prices["Core"]=0;
     ram_prices["16GB"]=40;
     ram_prices["32GB"]=125;
    
     var gfx_prices = new Array();
     gfx_prices["Core"]=0;
     gfx_prices["GT630"]=32; 
     gfx_prices["HD6670"]=55;
    
     var exp_prices = new Array();
     exp_prices["None"]=-25;
     exp_prices["Core"]=0;
     exp_prices["SATA3PCI"]=10;
    
     var mon_prices = new Array();
     mon_prices["None"]=-69;
     mon_prices["Core"]=0;
     mon_prices["24"]=40;
    
     var os_prices = new Array();
     os_prices["XP"]=-0;
     os_prices["WIN7H"]=10;
     os_prices["WIN7P"]=20; 
    
     var warranty_prices = new Array();
     warranty_prices["Core"]=0;
     warranty_prices["EXT"]=84;
    Here is an example of the radio button JS

    Code:
    {  
        var cpuPrice=0;
        var theForm = document.forms["Config"];
        var selectedcpu = theForm.elements["selectedcpu"];
        for(var i = 0; i < selectedcpu.length; i++)
        {
            if(selectedcpu[i].checked)
            {
                cpuPrice = cpu_prices[selectedcpu[i].value];
                break;
            }
        }
        return cpuPrice;
    }
    To then give a total figure all of these 'return' values are then added

    Code:
    function calculateTotal()
    {
        var solutionPrice = 785 + getcpuPrice() + getdrive1Price() + getdrive2Price() + getramPrice() + getgfxPrice() + getexpPrice() + getmonPrice() + getosPrice() + getwarrantyPrice() + getquantityPrice();
    My problem is that now I need to add a drop down box to select quantity.
    When 10 or more is selected in the drop down box a certain amount will be deducted from the total and when 20 or more is selected a further reduction will be applied.
    This is where I need some help.
    I need some javascript to produce a 'return' value dependent on the selection. so that I can call a 'getquantityPrice' value and apply it to the calculation above.

    Do I need to start with an array for the drop down box ? eg

    Code:
    var quantity_prices = new Array();
     quantity_prices["1"]=0;
     quantity_prices["2"]=0;
      quantity_prices["3"]=0;
     quantity_prices["4"]=0;
      quantity_prices["5"]=0;
     quantity_prices["6"]=0;
      quantity_prices["7"]=0;
     quantity_prices["8"]=0;
      quantity_prices["9"]=0;
     quantity_prices["10"]=-30;
      quantity_prices["11"]=-30;
     quantity_prices["12"]=-30;
      quantity_prices["13"]=-30;
     quantity_prices["14"]=-30;
      quantity_prices["15"]=-30;
     quantity_prices["16"]=-30;
      quantity_prices["17"]=-30;
     quantity_prices["18"]=-30;
      quantity_prices["19"]=-30;
     quantity_prices["20"]=-60;
      quantity_prices["25"]=-60;
     quantity_prices["30"]=-60;
    Here is the HTML for the Drop down box

    Code:
    <div id="Quantity">
    <select name="selectedquantity" size="1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="25">25</option>
    <option value="30">30</option>
    
    </select>
    </div>

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by p1truman View Post
    The configurator can be viewed here

    http://www.real-timesolutions.co.uk/...figurator.html
    That link is broken.

    Quote Originally Posted by p1truman View Post
    Do I need to start with an array for the drop down box ?
    No. Use:

    Code:
    function getBulkPurchaseDiscount() {
    	var quantity = document.getElementById("Quantity").getElementsByTagName("select").item(0).value;
    	var bulkPurchaseDiscount = 0;
    	if (quantity > 20) {
    		bulkPurchaseDiscount = 60;
    	}
    	else if (quantity > 10) {
    		bulkPurchaseDiscount = 30;
    	}
    	return bulkPurchaseDiscount;
    }
    Then add something like this to calculateTotal:

    Code:
    solutionPrice -= getBulkPurchaseDiscount();
    Also worth noting that you don't need all those value attributes in your HTML. If an option element contains text, that's automatically the value in the absence of a value attribute.
    Last edited by Arbitrator; 11-03-2013 at 03:38 AM. Reason: Added a missing return statement.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks the response, your help is much appreciated.

    Firstly sorry the link was dead

    Try this one
    http://www.real-timesolutions.co.uk/...figurator.html

    I have removed the array, tidied up my HTML dropdown and added your JS, however the values are still not being deducted from the total

    Here is your JS and how I have integrated it with calculateTotal

    Code:
    function getbulkPurchaseDiscount() {
    	var quantity = document.getElementById("Quantity").getElementsByTagName("select").item(0).value;
    	var bulkPurchaseDiscount = 0;
    	if (quantity > 20) {
    		bulkPurchaseDiscount = 60;
    	}
    	else if (quantity > 10) {
    		bulkPurchaseDiscount = 30;
    	}
    	return bulkPurchaseDiscount;
    }
    
            
    function calculateTotal()
    {
    
        var solutionPrice = 785 + getcpuPrice() + getdrive1Price() + getdrive2Price() + getramPrice() + getgfxPrice() + getexpPrice() + getmonPrice() + getosPrice() + getwarrantyPrice() - getbulkPurchaseDiscount();

    Here is the HTML for the dropdown since I have amended

    Code:
    <div id="Quantity">
                   <select name="selectedquantity" size="1">
                        <option >1</option>
                        <option >2</option>
                        <option >3</option>
                        <option >4</option>
                        <option >5</option>
                        <option >6</option>
                        <option >7</option>
                        <option >8</option>
                        <option >9</option>
                        <option >10</option>
                        <option >11</option>
                        <option >12</option>
                        <option >13</option>
                        <option >15</option>
                         <option>16</option>
                        <option >17</option>
                        <option >18</option>
                        <option >19</option>
                        <option >20</option>
                        <option >25</option>
                        <option >30</option>
    
                      </select>
                    </div>

    I have uploaded these amendments to the preview version, found from the link above.

    Am I doing something wrong here ?

    Thanks in advance

    Paul

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by p1truman View Post
    I have removed the array, tidied up my HTML dropdown and added your JS, however the values are still not being deducted from the total
    It's not my JS. I just examined your code and it looks like you substantially changed it to do something else; it doesn't match what you just posted here.

    You're now getting the select element's value, subtracting that value from the total (so that an order of two computers subtracts two pounds, three computers subtracts three pounds, etc.), then subtracting 30 more pounds if the order quantity is ten or greater.

    For some reason, you also split the function so that half its functionality is in the function while the other half is in calculateTotal. That's a nice way to create confusing code. Renaming the function to getquantityPrice makes it even more confusing since you aren't getting a price; you're getting a discount.

    Other than that, the code seems to be doing what you told it to do. There aren't any errors in Chrome 30; Firefox 26 Beta generates a warning about use of the deprecated getPreventDefault method; and Internet Explorer 11 shows five HTML-based warnings. Might want to fix those.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New Coder
    Join Date
    Apr 2012
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your help, much appreciated.

    The original idea was to just show the cost per unit and inform the user that if they purchased 10 or more systems they would only be paying 755 per system.

    The idea was not to show the total of multiple systems

    I hope this is clear

    So what I need is that when values of 0 to 9 are selected the price will remain at 785 and when 10 or above is selected a total value of 755 will be displayed.

    You'll see from the working preview that this is almost what is happening, however the value of the dropdown box is currently being deducted.

    That's why the total value is 784 at default instead of 785

    I hope this will be an easy mod

    Thanks again

    Paul

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by p1truman View Post
    So what I need is that when values of 0 to 9 are selected the price will remain at 785 and when 10 or above is selected a total value of 755 will be displayed.
    You can do this by slightly modifying the code I provided in post #2:

    Code:
    function getBulkPurchaseDiscount() {
    	var quantity = document.getElementById("Quantity").getElementsByTagName("select").item(0).value;
    	var bulkPurchaseDiscount = 0;
    	if (quantity >= 10) {
    		bulkPurchaseDiscount = 30;
    	}
    	return bulkPurchaseDiscount;
    }
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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