Javascript Radio Button
I am trying to make some project in which i want a text box to be displayed when I select expert button and no text box when i click on learner button.... I have written this code
Solution 1:
you can do like this:
<scriptlanguage="javascript">functiontoggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val='';
var obj=text.getElementsByTagName("input");
for (var i=0; i < obj.length; i++)
{
if (obj[i].checked)
{
rad_val = obj[i].value;
}
}
if(rad_val.indexOf("learner")!=-1){
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
}
</script>Solution 2:
You have some mistakes in the logic of your code and the way you retrieve the form elements.
Instead of fixing your code I would suggest revising the whole logic.
Better practice is binding the click event via code, not inline from within each input tag. Also, after clicking a radio button (also triggered from selecting with keyboard) you can assume for sure the selected value of the whole radio group is the value of the clicked button.
Here is the required code to achieve same effect:
window.onload = function() {
var oDiv = document.getElementById("div2");
var arrRoleButtons = document.getElementsByName("role");
for (var i = 0; i < arrRoleButtons.length; i++) {
var oCurrentRole = arrRoleButtons[i];
oCurrentRole.onclick = function() {
oDiv.style.display = (this.value === 'learner') ? "block" : "none";
}
}
};
Having this, you no longer need to call onclick from within the tags:
<inputtype="radio" name="role" value='learner' />
<inputtype="radio" name="role" value='expert' />
Solution 3:
if(rad_val=='learner'){
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
there is no value equals to learner, but learner1 or learner2
try this:
functiontoggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val = '';
var pattern = /\d+/g;
var a=pattern.exec(showHideDiv);
for (var i = 0; i < document.forms[showHideDiv].role.length; i++) {
if (document.forms[showHideDiv].role[i].checked) {
rad_val = document.forms[showHideDiv].role[i].value;
}
}
if (rad_val == 'learner' + a) {
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
}
Solution 4:
This is the solution. Thanks @dragon66 to solve my issue.
function toggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val='';
for (var i=0; i < text.role.length; i++)
{
if (text.role[i].checked)
{
rad_val = text.role[i].value;
}
}
if(rad_val=='learner'){
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
}
</script></head><body><table><tr ><td ><optionvalue="1"> 1 </option></td><td> Role </td><formid="form1"><td><label><inputtype="radio"name="role"value='learner'onClick="toggleContent('form1','div1')" >
Learner </label></td><td><label><inputtype="radio"name="role"value='expert'onClick="toggleContent('form1','div1')" >
Expert </label></form><td ><divID="div1"align=rightstyle="display:none;"><labelclass="labell labelUser" >why?</label><textareaname="description"align="right"id="description"cols="40"rows="5"class="inputbox">Why?</textarea><spanid="descriptionError"class="notifyForUser"spanError></span></div></td></tr><tr ><td ><optionvalue="2"> 2 </option></td><td> Role </td><formid="form2"><td><label><inputtype="radio"name="role"value='learner'onClick=toggleContent('form2','div2') >
Learner </label></td><td><label><inputtype="radio"name="role"value='expert'onClick=toggleContent('form2','div2') >
Expert </label></td></form><td ><divID="div2"align=rightstyle="display:none;"><labelclass="labell labelUser" >why?</label><textareaname="description"align="right"id="description"cols="40"rows="5"class="inputbox">Why?</textarea><spanid="descriptionError"class="notifyForUser"spanError></span></div></td></tr></table></body></html>
Post a Comment for "Javascript Radio Button"