How to get the value of a form element : check box and radio button

Getting a radio element and it’s checked value

Radio buttons in a form can be grouped together using the same name attribute, such that, if one of them is checked, all the others are automatically un-checked.

Let us look at an example:

<input type="radio" id="work_abroad_y" name="work_abroad" value="y" /><label for="work_abroad_y">Yes</label>
<input type="radio" id="work_abroad_n" name="work_abroad" value="n" /><label for="work_abroad_n">No</label>

In order to retrieve the value of the checked radio button, we can write a simple JavaScript function:

function getRadioCheckedValue(radio_name)
{
   var oRadio = document.forms[0].elements[radio_name];

   for(var i = 0; i < oRadio.length; i++)
   {
      if(oRadio[i].checked)
      {
         return oRadio[i].value;
      }
   }

   return '';
}

We obtain a reference to the group of radio buttons using the name of the group, and then iterate over all the radio button objects to test which one of them is checked.

Check box

A check box in a form has only two states (checked or un-checked) and is independent of the state of other check boxes in the form, unlike radio buttons which can be grouped together under a common name. Let us look at the HTML code showing two check boxes:

<input type="checkbox" name="email_alerts" id="chk_email_alerts" value="ON" checked><label for='chk_email_alerts'>Email me matching jobs everyday</label>

<input type="checkbox" name="recruiter_contact" id="chk_recruiter_contact" value="ON"><label for='chk_recruiter_contact'>Enable Recruiters to directly contact me</label>

In order to access these checkboxes, their values, and their states, we can use the following javascript function:

function testCheckbox(oCheckbox)
{
    var checkbox_val = oCheckbox.value;
    if (oCheckbox.checked == true)
    {
        alert("Checkbox with name = " + oCheckbox.name + " and value =" +
                checkbox_val + " is checked");
    }
    else
    {
        alert("Checkbox with name = " + oCheckbox.name + " and value =" +
              checkbox_val + " is not checked");
    }
}

We can then use the function this way:

oCheckBox1 = oForm.elements["email_alerts"];
oCheckBox2 = oForm.elements["recruiter_contact"];

testCheckbox(oCheckBox1);
testCheckbox(oCheckBox2);

Example

See the demo

The textarea for ‘work permit’ gets disabled if ‘No’ is chosen for ‘Willing to work abroad ?’ and vis-versa We write onClick event handler for each of the options. First have a look at the HTML:

Willing to work abroad ?
<input type="radio" name="work_abroad" id="work_abroad_y" value="y" onClick="enableElement(this.form.work_permit);"><label for='work_abroad_y'>Yes</label>
<input type="radio" name="work_abroad" id="work_abroad_n" value="n" onClick="disableElement(this.form.work_permit);"><label for='work_abroad_n'>No</label>

<label for="work_permit">Information about acquiring work permit / visa: </label><textarea name="work_permit" rows="3" cols="35"></textarea>

The JavaScript code:

function disableElement(obj)
{
     obj.value = ' - N.A. - ';
     obj.disabled = true;
}

function enableElement(obj)
{
     obj.value = '';
     obj.disabled = false;
}

Download the code

Prev: How to get the value of a form element : Drop downs and lists