You are here: Home » All Posts » Javascript Form Handling » How to get the value of a form element : check box and radio button

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

in Javascript Form Handling

This is the third article in the getting form element values using JavaScript series. In this article we will see how to get the value of check box and radio button.

Getting a radio element and it’s checked value

Radio button

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

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

Be Sociable, Share!

{ 4 comments… read them below or add one }

vicky November 22, 2013 at 6:43 am

thanks a lot

Reply

Victor September 16, 2013 at 4:11 pm

Really that was a 5 star tutorial.
I ‘ve already seen the demo example and I was wondering if is there any chance to have that pop up “form data” displayed in “contactus” form inside msg’s field?

Reply

sathish January 25, 2012 at 6:08 am

very nice code

Reply

Rohit June 27, 2011 at 6:44 pm

very nice informative tutorial

Reply

Leave a Comment

Previous post:

Next post: