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>
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>
Share
Improve this question
asked Jun 10, 2012 at 2:09
vincvinc
952 gold badges3 silver badges10 bronze badges
1
- try this: stackoverflow./questions/1085801/… – Nick Commented Jun 10, 2012 at 2:15
2 Answers
Reset to default 2Problem 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 pare 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 remended 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>
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);