Getting values as number from html dropdown menu with Javascript

Question

I tried to show an alert box which content will change everytime the user pick different selection on the dropdown list.

There are two dropdown list here, but the "product" dropdown list is pointed to the same array

As you can see that I've tried to make the js but it still does not work

What I want to ask is:

How do we get values from dropdown menu?
And how do we get the values from a dropdown list as an integer, not string?

*sorry for the broken english

Here's the javascript

<script language="javascript">
function RadioCheck() {

var number = new Array('0', '20', '30', '40', '50', '60');
var selection1 = document.quiz.product1;
var selection2 = document.quiz.product2;
var amountselection1 = parseInt(document.quiz.amount1,10);
var amountselection2 = parseInt(document.quiz.amount2,10);

for (i=0; i<selection1.length; i++) {
if (selection1[i].checked == true) {
    result1=number[i]*amountselection1;
}
}

for (i=0; i<selection2.length; i++) {
if (selection2[i].checked == true) {
    result2=number[i]*amountselection2;
}
}


var result = (result1 + 'is the first result, and' + result2 + 'is the second result');
alert(result);
return false;
}

</script>

Here is the HTML

<form name="quiz">

<select id="product1">
<option name="product1" value="0" selected="selected"> </option>
<option name="product1" value="1">Product 1</option>
<option name="product1" value="2">Product 2</option>
<option name="product1" value="3">Product 3</option>
<option name="product1" value="4">Product 4</option>
<option name="product1" value="5">Product 5</option>
</select>

<select id="amount1">
<option name="amount1" value="0" selected="selected">0</option>
<option name="amount1" value="1">1</option>
<option name="amount1" value="2">2</option>
<option name="amount1" value="3">3</option>
<option name="amount1" value="4">4</option>
<option name="amount1" value="5">5</option>
</select>

<select id="product2">
<option name="product2" value="0" selected="selected"> </option>
<option name="product2" value="1">Product 1</option>
<option name="product2" value="2">Product 2</option>
<option name="product2" value="3">Product 3</option>
<option name="product2" value="4">Product 4</option>
<option name="product2" value="5">Product 5</option>
</select>

<select id="amount2">
<option name="amount2" value="0" selected="selected">0</option>
<option name="amount2" value="1">1</option>
<option name="amount2" value="2">2</option>
<option name="amount2" value="3">3</option>
<option name="amount2" value="4">4</option>
<option name="amount2" value="5">5</option>
</select>

<input type="submit" value="Check Answer" onClick="RadioCheck(); return false;">
</form>

try this: http://stackoverflow.com/questions/1085801/how-to-get-selected-value-of-dropdownlist-using-javascript — Nick, Jun 10 '12 at 02:15

score 2 · Answer 1 · answered Feb 16 '16 at 22:55

Problem is you haven't declared variables result1 & result2. Also to get amount selected use document.quiz.amount1.value instead of just document.quiz.amount1, so on for amount2. Again to compare dropdown selection use selection1[i].selected instead of selection1[i].checked.

Try this code:

function RadioCheck() {

  var number = new Array(0, 20, 30, 40, 50, 60); //quotes will work but not recommended for numbers
  var selection1 = document.quiz.product1;
  var selection2 = document.quiz.product2;
  var amountselection1 = parseInt(document.quiz.amount1.value, 10); //changed
  var amountselection2 = parseInt(document.quiz.amount2.value, 10); //changed
  var result1 = 0, result2 = 0; //added line

  for (i = 0; i < selection1.length; i++) {
    if (selection1[i].selected) { //changed
      result1 = number[i] * amountselection1;
    }
  }

  for (i = 0; i < selection2.length; i++) {
    if (selection2[i].selected) { //changed
      result2 = number[i] * amountselection2;
    }
  }


  var result = (result1 + 'is the first result, and ' + result2 + 'is the second result');
  alert(result);
  return false;
}

<form name="quiz">

  <select id="product1">
    <option name="product1" value="0" selected="selected"></option>
    <option name="product1" value="1">Product 1</option>
    <option name="product1" value="2">Product 2</option>
    <option name="product1" value="3">Product 3</option>
    <option name="product1" value="4">Product 4</option>
    <option name="product1" value="5">Product 5</option>
  </select>

  <select id="amount1">
    <option name="amount1" value="0" selected="selected">0</option>
    <option name="amount1" value="1">1</option>
    <option name="amount1" value="2">2</option>
    <option name="amount1" value="3">3</option>
    <option name="amount1" value="4">4</option>
    <option name="amount1" value="5">5</option>
  </select>

  <select id="product2">
    <option name="product2" value="0" selected="selected"></option>
    <option name="product2" value="1">Product 1</option>
    <option name="product2" value="2">Product 2</option>
    <option name="product2" value="3">Product 3</option>
    <option name="product2" value="4">Product 4</option>
    <option name="product2" value="5">Product 5</option>
  </select>

  <select id="amount2">
    <option name="amount2" value="0" selected="selected">0</option>
    <option name="amount2" value="1">1</option>
    <option name="amount2" value="2">2</option>
    <option name="amount2" value="3">3</option>
    <option name="amount2" value="4">4</option>
    <option name="amount2" value="5">5</option>
  </select>

  <input type="submit" value="Check Answer" onClick="RadioCheck(); return false;">
</form>

score 1 · Answer 2 · edited May 23 '17 at 10:28

1

Looks like this was already answered: Get selected value in dropdown list using JavaScript?

As for the integer values instead of strings, why not just convert? parseInt($stringVal);

edited May 23 '17 at 10:28

Community

1
1

answered Jun 10 '12 at 02:17

Nick

2,735
1
29
36

Getting values as number from html dropdown menu with Javascript

2 Answers2