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

beginner, javascript get check box, javascript get radio button, reference

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

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

Comments on this entry are closed.

coder 

Can I create a pop up box to display these information? Please help
coder 

How can I control, how much of information that can be displayed in Alert?
Frank Kigozi 

Try all that in a real world senerio with Redvoltex development studio. Just draw your elements using a mouse anywhere on the screen and control it with CSS and JavaScript easily. You can even use JavaScript frameworks to do more cool stuff within the app. For more information.http://Redvoltex.blogspot.ca
yash patel 

Hello friends give solution

there is filed name: user
type(student/faculty)(Using Dropdown). If user selects student then display other fields
for input such as course, semester, college name. If user selects faculty
then display other fields for input such as designation, department.

using HTMl code in PHP.
Rizaldi Satrya Herlambang 

Thanks, this help a lot 🙂
vicky 

thanks a lot
Victor 

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?
sathish 

very nice code
Rohit 

very nice informative tutorial