Tuesday, August 12, 2008

radio button


<form name="orderform">
Which one is your favorite?
  <input type="radio" name="music" value="Rock" checked="checked"> Rock
  <input type="radio" name="music" value="Reggae"> Reggae
  <input type="radio" name="music" value="Pop"> Pop
  <input type="radio" name="music" value="Metal"> Metal
  <input type="submit" onclick="get_radio_value()">
</form>

Accessing the value for a set of radio buttons is not that straight forward. document.form_name.radio_name.value does not work.
To get the associated value -

function get_radio_value() {
  for (var i=0; i < document.orderform.music.length; i++) {
     if (document.orderform.music[i].checked) {
       var rad_val = document.orderform.music[i].value;
     }
    }
}

In DOM object, the radio "music" is an array of elements. But when the form is submitted, there is only one attribute 'music' with the checked radio value.

Also, note that there are two different way to access DOM element. document.getElementById or document.<form-name>.<input-element-name>

For select drop-down, we can set the selection either by select_element.value or iterate its options array, and set selectedIndex value. Note that onchange event won't be triggered automatically.

No comments: