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 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
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; }
Prev: How to get the value of a form element : Drop downs and lists
Comments on this entry are closed.
Can I create a pop up box to display these information? Please help
How can I control, how much of information that can be displayed in Alert?
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
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.
Thanks, this help a lot 🙂
thanks a lot
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?
very nice code
very nice informative tutorial