Pass two values from option select to javascript function

Question

I have a working tax calculator that I need to add one more piece to. For input C, I need there to be two known values associated with the town the user selects. Then, I need those values to be plugged into the Calculate function in different places, but only one of the values in one place in Calculate2. Something like:

<select name="input_C" id="input_C">
<option value="value1,value2">Acworth</option>
</select>

function Calculate(Atext, Btext, Ctext_value1, Ctext_value2, form)
{
    var A = parseFloat(Atext);
    var B = parseFloat(Btext);
    var C_1 = parseFloat(Ctext_value1);
    var C_2 = parseFloat(Ctext_value2);
    form.Answer.value = ((B/C_1)-A)*C_2;
}

function Calculate2(Atext, Ctext_value2, Dtext, form)
{
    var A = parseFloat(Atext);
    var C_2 = parseFloat(Ctext_value2);
    var D = parseFloat(Dtext);
    form.Answer.value = D-((A*C_2)/1000);
}

But I can't figure out how to pass both values and associate them correctly?

The code below works, but is obviously missing having two values associated with input_C. I'm sure I need to add something else to the document.getElementById("input_C").value, in addition to other changes...

function compute() {
    var A = document.getElementById("input_A").value;   
    var B = document.getElementById("input_B").value;
    var C = document.getElementById("input_C").value;
    var D = document.getElementById("input_D").value;

    if (B != "" && D != "") {
        alert("You may only enter either an Assessment or Annual Taxes.");
    } else if (A =="" && B =="" && D =="") {
        alert("You must select your town, enter a Market Value, and either an Assessment or     Annual Taxes to calcuate..");
    } else if (C =="999") {
        alert("You must select your town.");
    } else if (A =="") {
        alert("You must enter a Market Value.");
    } else if (B != "" && C !="") {
        Calculate(A, B, C, document.getElementById("overtax"));
    } else if (D != "" && C !="") {
        Calculate2(A, C, D, document.getElementById("overtax"));
    } else {
        alert("You must select your town, enter a Market Value, and either an Assessment or     Annual Taxes to calcuate.");
   }
}

function Calculate(Atext, Btext, Ctext, form)
{
    var A = parseFloat(Atext);
    var B = parseFloat(Btext);
    var C = parseFloat(Ctext);
    form.Answer.value = ((B-A)*C)/1000;
}

function Calculate2(Atext, Ctext, Dtext, form)
{
    var A = parseFloat(Atext);
    var C = parseFloat(Ctext);
    var D = parseFloat(Dtext);
    form.Answer.value = D-((A*C)/1000);
}


<FORM NAME="Calculator" METHOD="post" id="overtax">
    <P>City/Town:
        <select name="input_C" id="input_C">
            <option value="999">Select Your City/Town</option>
            <option value="20.55">Acworth</option>
        </select>
    </P>
    <P>Market Value: <INPUT TYPE=TEXT NAME="input_A" id="input_A" SIZE=10     onblur="this.value=this.value.replace(/,/g,'')"> <span class="directions">Please enter what you believe your property is worth in today's market</span></P>
    <P>Assessment: <INPUT TYPE=TEXT NAME="input_B" id="input_B" SIZE=10 onblur="this.value=this.value.replace(/,/g,'')"> <span class="directions">Located on your property tax bill or assessment card</span></P>
    <P>OR</P>
    <P>Annual Taxes: <INPUT TYPE=TEXT NAME="input_D" id="input_D" SIZE=10 onblur="this.value=this.value.replace(/,/g,'')"> <span class="directions">Located on your property tax bill or assessment card</span></P>

    <P><INPUT TYPE="button" VALUE="Calculate" name="AddButton" onclick="compute();" /></P>

Your problem seems unclear, you may want to clarify by using a half working example at jsfiddle.net or something and then sharing the link. — Rayshawn
– Rayshawn, Commented Oct 11, 2012 at 2:50

Eran Medan · Accepted Answer · 2012-10-11 02:55:34Z

9

If I understand correctly you simply need to split the value String

e.g. given this HTML

<select id="mySelect">
   <option value="100,200">My Value</option>
</select>

then this will give you the values

var value = document.getElementById("mySelect").value;
var split = value.split(",");
var v1 = split[0];
var v2 = split[1];

e.g. see in jsfiddle

1 Comment

Lauren Over a year ago

Thanks - that did the trick! I didn't know what search term to use (split) to find the answer.

rahulbhondave · Accepted Answer · 2016-01-13 15:03:42Z

1

We can pass it with data attribute, and can access in js,

<OPTION VALUE="1" data-year="2010">One</OPTION>

var year = $(this).find(':selected').data('year');

answered Jan 13, 2016 at 15:03

rahulbhondave

1862 silver badges9 bronze badges

Collectives™ on Stack Overflow

Pass two values from option select to javascript function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related