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 14 of 14
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Multiple Variables in A Drop Down List

    I am creating a quote calculator as a mobile app using the JQuery Mobile plugin in Dreamweaver CS5.5. This supports HTML5 & Javascript.

    I have included a drop down list in which the user selects a specific Annual Volume. I have 2 different calculations that need to be done based on the users selection. Different calculations meaning that I need 2 different number values assigned to the option.

    For Example:

    Calculation #1 (I'm calculating what the Run Quantity is based on what the user selects as the Annual Volume. If user selects an Annual Volume of 150,000 then the calculated result for Run Quantity needs to be 3500)

    HTML for this scenario:
    Code:
    <li data-role="fieldcontain">
        <p><span class="ui-listview-inset">Annual Volume:</label>
          <select name="annualvolume" id="annualvolume">
        
         onChange="Calculate();">
            <option value="1000">10,000</option>
            <option value="2000">30,000</option>
            <option value="3500">150,000</option>
            <option value="6000">300,000</option>
            <option value="10000">500,000</option>
            <option value="20000">1,000,000</option>
            </select>
        </p>
      </li>
    Calculation #2 (within the same form as the above calculation, I also need to calculate what the Annual Sales will be. The math to calculate the Annual Sales is to multiply the Final Piece Price (which is another calculation within this form) with Annual Volume. However with this Calculation # 2 I need the value to be 150,000 when user selects 150,000 and NOT 3500 as it was before.

    I've tried tweaking the HTML in following manner to assign 2 values within the same drop down, but it didn't work correctly.
    Code:
    <option value="3500" amount="150000">150,000</option>
    My javascript is as follows (please note that I deleted all the result fields except for the 3 that reference my described calculations above. My actual calculator has over 20 results all based on the user's inputs. This is why there are so many variables listed in my javascript - they are for the other results)

    Code:
    <SCRIPT LANGUAGE="JavaScript">
    function CalculateSum(Atext, Btext, materialtype, presstype, Etext, Ftext, annualvolume, annualvolume2,Htext, Itext, form)
    {
    //INPUTS
    var A = parseFloat (Atext);
    var B = parseFloat (Btext);
    var C = document.getElementById('materialtype').value;
    var D = document.getElementById('presstype').value;
    var E = parseFloat (Etext);
    var F = parseFloat (Ftext);
    var G = document.getElementById('annualvolume').value;
    var GA = document.getElementById('annualvolume').amount;
    var H = parseFloat (Htext);
    var I = parseFloat (Itext);
    
    //RESULTS
    form.RunQuantity.value = G
    form.FinalPiecePrice.value = (((C*A) + F) + ((D/G) + E) + (((C*A) + F) + ((D/G) + E )) * (H *.01) + (((C*A) + F) + ((D/G) + E ) + (((C*A) + F) + ((D/G) + E )) * (H *.01)) * (I *.01))
    form.AnnualSales.value = (form.FinalPiecePrice.value * GA)
    }
    
    </script>
    Currently I am simply having the user enter the annual volume twice so I can do the 2 calculations, but this is really clunky and not ideal.

    I'm fairly new to Javascript but have learned a lot from reading other posts by people like you. This is the first thing I haven't been able to figure out on my own and any help would be greatly appreciated.

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

    Lightbulb Something to try...

    See if you can modify from this code...
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    function Calculate(Val) {
      if (Val == '|') { return; }
      var info = Val.split('|');
      document.getElementById('runQuantity').value = info[0];
      document.getElementById('runVolume').value = info[1];
      document.getElementById('Total').value = Number(info[0]) * Number(info[1]);
    }
    </script>
    
    </head>
    <body>
    <li data-role="fieldcontain"> Calculations based upon:
      <p><span class="ui-listview-inset">Annual Volume:
        <select name="annualvolume" id="annualvolume" onChange="Calculate(this.value)">
          <option value="|">Select</option>
          <option value="10000|1000">10,000</option>
          <option value="30000|2000">30,000</option>
          <option value="150000|3500">150,000</option>
          <option value="300000|6000">300,000</option>
          <option value="500000|10000">500,000</option>
          <option value="1000000|20000">1,000,000</option>
        </select>
      </p>
    </li>
    
    Run Quantity: <input type="text" value="" id="runQuantity" readonly><p>
    Run Volume: <input type="text' value="" id="runVolume" readonly><p>
    Total: <input type="text" value="" id="Total" readonly>
    </body>
    </html>
    Post back if you have questions about the concept.

    Good Luck!
    Last edited by jmrker; 07-01-2011 at 09:35 PM.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    But the other way to do it:
    Code:
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    function Calculate(select) 
    {
        var selix = select.selectedIndex );
        if ( selix == 0 ) return;
        var opt = select.options[selix];
        var volume = Number( opt.text.replace(/[^\d]/g,"") ); // get number without commas
        var quantity = Number( opt.value );
        document.getElementById('runQuantity').value = quantity;
        document.getElementById('runVolume').value = volume;
        ... etc. ...
    }
    </script>
    
    </head>
    <body>
    <li data-role="fieldcontain"> Calculations based upon:
      <p><span class="ui-listview-inset">Annual Volume:
        <select name="annualvolume" id="annualvolume" onChange="Calculate(this)">
          <option value="">Select</option>
          <option value="1000">10,000</option>
          <option value="2000">30,000</option>
          <option value="3500">150,000</option>
          <option value="6000">300,000</option>
          <option value="10000">500,000</option>
          <option value="20000">1,000,000</option>
        </select>
      </p>
    </li>
    
    Run Quantity: <input type="text" value="" id="runQuantity" readonly><p>
    Run Volume: <input type="text' value="" id="runVolume" readonly><p>
    Total: <input type="text" value="" id="Total" readonly>
    </body>
    </html>
    That is, you *can* get both the value (that part after value= inside the <option> tag) AND the text (the part between <option> and </option>) separately.

  • #4
    Regular Coder
    Join Date
    Jun 2011
    Location
    Swindon, England
    Posts
    124
    Thanks
    3
    Thanked 9 Times in 9 Posts
    I would suggest running a loop based on the post variable...

    A set of ifs to run through the posted value and assign the corresponding value to a new variable...

    Not at pc so can't type out an example but do you understand what I mean... Essentially

    Define an array of options

    While through the array with

    If x == value
    y = corresponding
    Else
    I++

    Hope it makes sense

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Old Pedant - thank you so much for the provided code. I tried using your method first because the concept somewhat made sense to me. However I'm sure I'm still not doing it right and it's not working.

    1. I wasn't sure if I was supposed to replace my function CalculateSum...
    I didn't because I'm thinking that all my other calculations are using this to work. So I just added your function Calculate (select) underneath it.

    Code:
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    function CalculateSum(Atext, Btext, materialtype, presstype, Etext, Ftext, annualvolume, annualvolume2,Htext, Itext, form)
    {
    
    function Calculate (select)
    {
    	var selix = select.selectedIndex };
    	if ( selix == 0) return;
    	var opt = select.options[selix];
    	var volume = Number( opt.text.replace(/[^\d]/g,"") ); //get number without commas
    	var quantity = Number( opt.value);
    2. This code you used:
    Code:
    document.getElementById('runQuantity').value = quantity;
     document.getElementById('runVolume').value = volume;
        ... etc. ...
    looked like my code that I used to define my specific variables so I used your code to define my two variables needed to do that two calculations (G & GA). As follows:
    //INPUTS
    Code:
    var A = parseFloat (Atext);
    var B = parseFloat (Btext);
    var C = document.getElementById('materialtype').value;
    var D = document.getElementById('presstype').value;
    var E = parseFloat (Etext);
    var F = parseFloat (Ftext);
    var G = document.getElementById('annualvolume').value = quantity;
    var GA = document.getElementById('annualvolume').value = volume;
    var H = parseFloat (Htext);
    var I = parseFloat (Itext);
    3. I wasn't really sure why you were using 'runQuantity' and 'runVolume'. My dropdown menu uses the name and id of annualvolume. And the two form fields that the answers are to be displayed in are RunQuantity and AnnualSales. So I tweaked those form fields as follows:

    Code:
    <li data-role="fieldcontain">
    <label for="RunQuantity" 
    <p><span class="ui-listview-inset">Run Quantity:</span></p></label>
    <input type="text" value="" id="RunQuantity" SIZE=12 readonly</P>
    </li>
    
    <li data-role="fieldcontain">
    <label for="AnnualSales" 
    <p><span class="ui-listview-inset">Annual Sales ($) :</span></p></label>
    <input type="text" value = "" id="AnnualSales" readonly></P>
    </li>
    Now when I plug in my data and hit calculate absolutely nothing happens. Like I said, I can read through your code and basically understand what it's doing, but I don't think I understand Javascript well enough to implement it myself. I had these questions and wasn't sure where or exactly how to use your code so I did it in a way that kind of made sense to me...what did I do wrong?

    ~Tasha : )

  • #6
    Regular Coder
    Join Date
    Jun 2011
    Location
    Swindon, England
    Posts
    124
    Thanks
    3
    Thanked 9 Times in 9 Posts

    Smile

    Hello...

    Try adding to your function something along the lines of...

    Code:
    var G = document.getElementById('annualvolume').value;	
    			
    var GArr=new Array("10000","30000","150000","300000","500000","1000000");
    var GArr2=new Array("1000","2000","3500","6000","10000","20000")
    
    // array 1 values [1][2][3] and so on must correspond to array 2's matching values [1][2][3]
    // this is because the use of var i below matches the value in field [i] in array 1 and then returns field [i] (the same number) in array 2 
    	
    for (i in GArr)
    	{
    		if (G == GArr[i])
    			{
    				var G2 = GArr2[i];
    			}
    	}
    tested here (http://dev2.dephri.com/sandbox.php)

    output in test version using:

    document.getElementById('g').innerHTML=G;
    document.getElementById('g2').innerHTML=G2;



    /////// EDIT

    This is to fix the issue as written in the OP!

    Place below getting variables and G2 replaces GA ( if i read your script write).
    Last edited by LSCare; 07-06-2011 at 09:11 PM. Reason: explains

  • #7
    New Coder
    Join Date
    Jul 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you LSCare for your suggestions. I like the last one you posted and it's very helpful that you had a working link. I can follow and understand what your code is doing. I guess I'm still having problems with implementing your code into my existing code. Javascript is fairly new to me so I get a bit lost in taking other people's code and adding it to my own. For example, my current javascript code is as follows:

    Code:
    function CalculateSum(Atext, Btext, materialtype, presstype, Etext, Ftext, annualvolume, annualvolume2,Htext, Itext, form)
    {
    
    var A = parseFloat (Atext);
    var B = parseFloat (Btext);
    var C = document.getElementById('materialtype').value;
    var D = document.getElementById('presstype').value;
    var E = parseFloat (Etext);
    var F = parseFloat (Ftext);
    var G = document.getElementById('annualvolume').value;
    var GA = document.getElementById('annualvolume2').value;
    var H = parseFloat (Htext);
    var I = parseFloat (Itext);
    
    form.MaterialPerLb.value = C
    form.RunQuantity.value = G
    form.SetupCost.value = D
    form.SetupCostPerPiece.value = (D/G).toFixed(3)
    form.TotalMaterialCost.value = ((C*A) + F).toFixed(3)
    form.TotalProcessingCost.value = ((D/G) + E ).toFixed(3)
    form.SGAValue.value = ((((C*A) + F) + ((D/G) + E )) * (H *.01) ).toFixed(3)
    form.ProfitValue.value = ((((C*A) + F) + ((D/G) + E ) + (((C*A) + F) + ((D/G) + E )) * (H *.01)) * (I *.01)).toFixed(3)
    form.TotalScrapWeight.value = A - B
    form.MaterialCost.value = (C * A).toFixed(3)
    form.Subcomponents.value = (F).toFixed(3)
    form.FinalPiecePrice.value = (((C*A) + F) + ((D/G) + E) + (((C*A) + F) + ((D/G) + E )) * (H *.01) + (((C*A) + F) + ((D/G) + E ) + (((C*A) + F) + ((D/G) + E )) * (H *.01)) * (I *.01)).toFixed(3)
    form.ContributionMargin.value = ((((((D/G) + E ) + (((C*A) + F) + ((D/G) + E )) * (H *.01) + (((C*A) + F) + ((D/G) + E ) + (((C*A) + F) + ((D/G) + E )) * (H *.01)) * (I *.01)) * G ) / ((((C*A) + F) + ((D/G) + E) + (((C*A) + F) + ((D/G) + E )) * (H *.01) + (((C*A) + F) + ((D/G) + E ) + (((C*A) + F) + ((D/G) + E )) * (H *.01)) * (I *.01)) * G)) * 100).toFixed(2)
    form.ContributionPerUnit.value = (((D/G) + E ) + (((C*A) + F) + ((D/G) + E )) * (H *.01) + (((C*A) + F) + ((D/G) + E ) + (((C*A) + F) + ((D/G) + E )) * (H *.01)) * (I *.01)).toFixed(3)
    form.AnnualContribution.value = (form.ContributionPerUnit.value * GA).toFixed(0)
    form.AnnualSales.value = (form.FinalPiecePrice.value * GA).toFixed(0);
    }
    
    </script>
    You can see that all my user input fields are assigned a var and then all the results I'm displaying based on those variables. (form.XXX.value = appropriate calculations)

    So I can follow that your code is giving me the ability to create my 2 needed variables based on the one drop down (g, g2)

    Question 1: Am I replacing my function CalculateSum with your function code or am I just adding yours to mine? If I'm adding it does it matter if it goes before or after mine?

    Question 2: In your working test, when you choose a number from the drop down the 2 different values just appear underneath each label - how do I get these values to appear within my answer fields?
    Code:
    <li data-role="fieldcontain">
    <label for="RunQuantity" 
    <p><span class="ui-listview-inset">Run Quantity:</span></p></label>
    <INPUT TYPE=TEXT NAME="RunQuantity" SIZE=12></P>
    </li>
    Question 3: How do i connect this to my "calculate" button?
    Code:
    <div data-role="fieldcontain">
      <input type="reset" value="Reset" />
      <INPUT TYPE="button" data-theme="b" VALUE="Calculate" name="Calculate" onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form.materialtype.value, this.form.presstype.value, this.form.input_E.value, this.form.input_F.value, this.form.annualvolume.value, this.form.annualvolume2.value, this.form.input_H.value, this.form.input_I.value, this.form)">
    </div>
    I understand the basic premise of doing calculations with javascript but this multiple value drop down simply has me totally lost.

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Post the HTML along with any appropriate CSS or JS you have developed.
    The problem cannot be easily solved without seeing the whole picture.

  • #9
    Regular Coder
    Join Date
    Jun 2011
    Location
    Swindon, England
    Posts
    124
    Thanks
    3
    Thanked 9 Times in 9 Posts
    Hello,

    Answer 1: You are adding my code to your code like so:

    PHP Code:
    var parseFloat (Atext);
    var 
    parseFloat (Btext);
    var 
    document.getElementById('materialtype').value;
    var 
    document.getElementById('presstype').value;
    var 
    parseFloat (Etext);
    var 
    parseFloat (Ftext);
    var 
    document.getElementById('annualvolume').value;            
    var 
    GArr=new Array("10000","30000","150000","300000","500000","1000000");
    var 
    GArr2=new Array("1000","2000","3500","6000","10000","20000")
    for (
    i in GArr)
        {
            if (
    == GArr[i])
                {
                    var 
    G2 GArr2[i];
                }
        }
    var 
    parseFloat (Htext);
    var 
    parseFloat (Itext); 
    Answer 2: I think what you want is achieved in the same way you ouput other variables to other fields like so:

    PHP Code:
    form.RunQuantity.value 
    or

    PHP Code:
    form.RunQuantity.value G2 
    Basically where you currently have G as a value influencing a field, keep it as G.

    If you have GA then change that to G2


    Answer 3: As my code is integrated into your existing funtion... It will be included in your original function.

    I hope answer 2 makes sense. Please let me know if it does not i will try harder to explain. (if it does not is there a link i could see the file on?)

  • #10
    Regular Coder
    Join Date
    Jun 2011
    Location
    Swindon, England
    Posts
    124
    Thanks
    3
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by LSCare View Post
    I hope answer 2 makes sense.
    In fact i can show you i think:

    PHP Code:
    form.RunQuantity.value G
    form
    .FinalPiecePrice.value = (((C*A) + F) + ((D/G) + E) + (((C*A) + F) + ((D/G) + )) * (*.01) + (((C*A) + F) + ((D/G) + ) + (((C*A) + F) + ((D/G) + )) * (*.01)) * (*.01))
    form.AnnualSales.value = (form.FinalPiecePrice.value G2
    Hope that is right!

  • #11
    New Coder
    Join Date
    Jul 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    First off - thank you so much LSCare. You have been a tremendous help. Your last post suddenly clicked with me and I had to bang my hand on forehead because it made perfect sense to implement it in that way. I kind of thought "well, duh" Unfortunately when I run the calculations everything works correctly except for the last 2 result fields. I'm getting NaN. These are the only two fields that use G2 in the calculations.

    Could it possibly be that i need to add something to my function CalculateSum(Atext, Btext, .....)

    Every variable I use has something representing it in the function Calculate code. (example: var A = parseFloat (Atext); = function CalculateSum (Atext...)

    Do I need to add something for the arrays we added? Or specifically the G2 variable?

  • #12
    New Coder
    Join Date
    Jul 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Nevermind LSCare - I got it working! I had to flip flop the arrays. GArr = 1000, 2000, etc
    and GArr2 = 10000, 30000 etc...

    Thank you so very much. I have spent days troubleshooting this.

    ~Tasha : )

  • #13
    Regular Coder
    Join Date
    Jun 2011
    Location
    Swindon, England
    Posts
    124
    Thanks
    3
    Thanked 9 Times in 9 Posts
    I'm not sure is my simple answer...

    I can't see where G2 should be in the second of the three I posted though.

    I don't understand why they error... Could you post the full function up please?

  • #14
    Regular Coder
    Join Date
    Jun 2011
    Location
    Swindon, England
    Posts
    124
    Thanks
    3
    Thanked 9 Times in 9 Posts
    No problem

    laurencCare


  •  

    Tags for this Thread

    Posting Permissions

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