How To Work With Conditional Radio Buttons in JavaScript
| Objective of this post |
This post talks about how to create radio buttons in HTML and how to provide controls to them. The objective is after selecting one radio button one dropdown will appear but when you click on other ,some other dropdown will appear.
| Create Radio Buttons in HTML |
From W3 schools guideline the code for creating a radio buttons is
<input type="radio" name="prep" value="drop1"
onClick="getVal()"> select for Bus;<br> <input type="radio" name="prep" value="drop2"
onClick="getVal()"> Select For Train;<br>
- The objective to give same name is to make them mutually exclusive.
- That means if I select one the other one will automatically get deselected.
- Again the value is given to identify uniquely.
- Now let us understand the the last parameter. onClick..This is given to understand what will happen if the corresponding radio got clicked.
- Check is another property.Which says by default which radio will be checked. As per our requirements there should not be any radio in selected mode by default.
| The selection or DropDown preparation: |
To create dropdown we can give HTML syntax like-
<select id="bus" > <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> <select id="train"> <option value="volvo">Tufan</option> <option value="saab">Coal Field</option> <option value="opel">MMTS</option> <option value="audi">Local</option> </select>
id is used to track these select as per our requirements.
| The GetValue Function: |
As per the requirements, if one of the radio gets clicked the corresponding dropdown should show.To activate this feature we need to design the getValue function.It is defined in the below written manner.
function getVal(){
var radios = document.getElementsByName('prep');
//This step will get all the radio whose name is prep.
for (var i = 0, length = radios.length; i < length; i++) {
//this is to loop through the radio to determine which one is selected
if (radios[i].checked) {
if(radios[i].value=="drop1")
{
//if the first one is selected that means user is looking for Bus service
document.getElementById("bus").style.display="block";
document.getElementById("train").style.display="none"
}
if(radios[i].value=="drop2")
{
//if the Second one is selected that means user is looking for Train service
document.getElementById("train").style.display="block";
document.getElementById("bus").style.display="none"
}}
}
}
| Syntax to visible or hide for a selectbox: |
The syntax we will use to display or hide the selectbox..
//none for hide
document.getElementById("bus").style.display="none"
document.getElementById("train").style.display="none"
//block for visible
document.getElementById("bus").style.display="block"
document.getElementById("train").style.display="block"How to handle these?? Well to start with, in the body tag, we will call a function that will make both the select box hide.
<BODY bgColor="#FFFFFF" onLoad="hideDiv()">
and the function will be-
function hideDiv( ) {document.getElementById(“bus”).style.display=”none”
document.getElementById(“train”).style.display=”none”
}
| Real Implementation |
Here is the total code to work with Radiobutton.
<HTML> <HEAD> <TITLE>Sample Form with Radio Buttons</TITLE> <SCRIPT Language="JavaScript"> <!--
function hideDiv( ) {
document.getElementById(“bus”).style.display=”none”
document.getElementById(“train”).style.display=”none”
}
function getVal(){
var radios = document.getElementsByName(‘prep’);
for (var i = 0, length = radios.length; i < length; i++ ) {
if (radios[i].checked) {
if(radios[i].value==”drop1″)
{
document.getElementById(“bus”).style.display=”block”;
document.getElementById(“train”).style.display=”none”
}
if(radios[i].value==”drop2″)
{
document.getElementById(“train”).style.display=”block”;
document.getElementById(“bus”).style.display=”none”
}
}
}
}
//->
</SCRIPT>
</HEAD>
<BODY bgColor=”#FFFFFF” onLoad=”hideDiv()”>
<form name=”form1″>
<p>Select one option for Travel</p>
<blockquote>
<p>
<input type=”radio” name=”prep” value=”drop1″ onClick=”getVal()”>
select for Bus;<br>
<input type=”radio” name=”prep” value=”drop2″ onClick=”getVal()”>
Select For Train;<br>
</p>
<select id=”bus” >
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”opel”>Opel</option>
<option value=”audi”>Audi</option>
</select>
<select id=”train”>
<option value=”volvo”>Tufan</option>
<option value=”saab”>Coal Field</option>
<option value=”opel”>MMTS</option>
<option value=”audi”>Local</option>
</select>
</blockquote>
</form>
</BODY>
</HTML>
