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

# Thread: Multiple Variables in A Drop Down List

1. ## 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.

• ## Something to try...

See if you can modify from this code...
Code:
```<!DOCTYPE HTML>
<html>
<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>

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

• But the other way to do it:
Code:
```<html>
<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>

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

• 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

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

• Hello...

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).

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

• Post the HTML along with any appropriate CSS or JS you have developed.
The problem cannot be easily solved without seeing the whole picture.

• Hello,

PHP 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;             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 (G == GArr[i])             {                 var G2 = GArr2[i];             }     } var H = parseFloat (Htext); var I = 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 = G  ```
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?)

• Originally Posted by LSCare
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) + 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 * G2)  ```
Hope that is right!

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

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

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

• No problem

laurencCare

•