All I want to pass a <select> </select> value to a JavaScript function.
Here is my code:
function test() {
var gender = document.getElementById("gender").value;
}
HTML
<form action="" method="post" onSubmit="test()">
<select name="gender" id="gender">
<option selected="" value="Default">select</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</form>
try this
var element = document.getElementById("gender");
var gender = element.options[element.selectedIndex].value;
You don't have a submit button in there so I assume you want to harness the onChange event of the select. Here is how you would do that:
<form id="myForm" action="" method="post">
<select name="gender" id="gender" onChange="test()">
<option selected="" value="Default">select</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</form>
function test()
{
var gender = document.getElementById("gender").value;
console.log('Gender:', gender);
}
And a jsbin link to see it in action:
