Pass HTML dropdown menu values to JavaScript function & onclick function call

Question

I know that this question has been asked in several ways, but they have not helped me, and I'm getting an "undefined" error when I try to debug this.

It's simple: I have an HTML dropdown menu with several different metric units on it, and I have given each a value. I want to pass the selected value to a JavaScript function that will check the metric unit type and then convert it to a corresponding English unit.

The dropdown HTML:

e<p><span><label for="metric-unit">Select metric unit</label></span>
                    <select name="metric" id="metric">
                        <option value="cel">Celsius</option>
                        <option value="cm">Centimeters</option>
                        <option value="kg">Kilograms</option>
                        <option value="ml">Milliliters</option>
                    </select>
                </p>

My JavaScript function attempt to pass the value:

metricUnit = document.getElementById("metric").value;

My second question is on calling the conversion function. I want to do that once the metric unit is selected, and a number entered into a text field, and then the user clicks a submission button. Should I call the function with or without arguments, especially if I use getElementById to get the value of the metric unit and the number before any math occurs?

Would it be

onlick ="convertMeasure()"

or

onclick = "convertMeasure(metric, numVal)"

Answer 1

Assuming the id of submission buttons and text field are sub and txt respectively, and you've a default <option> like "choose unit" with value = 0 :

var button= document.getElementById("sub");
 button.onclick= function(){
   var select= document.getElementById("metric");
   metricUnit = select[select.selectedIndex].value; //value selected in select
   val = document.getElementById("txt").value; // value entered in text field
   if(metricUnit!=0 && !isNaN(val)){ // make sure selected item is not default and the text in textbox is a number
     convertMeasure(metricUnit, val); // call your function
   }
 }

Answer 2

First get your select element

var select = document.getElementById("metric");

and then you can go read the value from options with the selected index

var metric = select.options[select.selectedIndex].value;

As for how to call the convertMeasure() method I would suggest the first one if you are going to get values from multiple elements on the fly.

Here is a jsfiddle to play with http://jsfiddle.net/zEncN/

Answer 3

It seems like you're putting your click binding somewhere in the html like this

<div onclick='callThisFunction()'> Click on this div </div>

Then in your javascript, you can have that function. In it, you can get the selected value of the drop down list and do whatever logic you need.

<script>
   function callThisFunction() {
       var dropdown = document.getElementById("metric");
       var unit = dropdown.options[dropdown.selectedIndex].value;
       var nameOfUnit = dropdown.options[dropdown.selectedIndex].text;

       if (unit == "cm") {
           // do stuff
       } else if (unit == "ml") {
           // do stuff
       }
       // etc.
   }
</script>