Javascript radiobutton show and hide field

Question

Hi I will try to give only the needed information I have a div container with 3 radiobuttons. ids "rad1", "rad2", "rad3" I have 2 textfields in a form with ids "textField1" , "textField2".

I want to show different textFields depending on which radio button is clicked.

if ("rad1" is clicked) I want to show "textField1"

if ("rad2" is clicked) I want to show "textField2"

if (rad3 is clicked/nothing is clicked) I want to hide both.

This is my JavaScript that I though would work but does not.

fieldShower();

function fieldShower() {
  if (document.getElementById('rad1').checked) {
    document.getElementById('textField1').style.display = 'block';
    document.getElementById('textField2').style.display = 'none';
  } else if(document.getElementById('rad2').checked) {
    document.getElementById('textField1').style.display = 'none';
    document.getElementById('textField2').style.display = 'block';
  } else {
    //hide both
    document.getElementById('textField1').style.display = 'none';
    document.getElementById('textField2').style.display = 'none';
  }
}

Make sure to attach the function call to an event listener. This will ensure that when the radio button changes, the function can kick off and check in what situation you are and display the appropriate field. https://stackoverflow.com/a/8922037/9754741 — Francesco, Jul 30 '20 at 09:27

score 1 · Answer 1 · answered Jul 30 '20 at 09:40

You had to set an onClick-event on your input-fields either in your html or in your JS code. For simplicity I gave all 3 radiobuttons the same name so allways only one can be clicked at the same time.

function fieldShower() {
  if (document.getElementById('rad1').checked) {
    document.getElementById('textField1').style.display = 'block';
    document.getElementById('textField2').style.display = 'none';
  } else if(document.getElementById('rad2').checked) {
    document.getElementById('textField1').style.display = 'none';
    document.getElementById('textField2').style.display = 'block';
  } else {
    //hide both
    document.getElementById('textField1').style.display = 'none';
    document.getElementById('textField2').style.display = 'none';
  }
}

<input type="radio" id="rad1" name="myRadio" onClick="fieldShower()">
<input type="radio" id="rad2" name="myRadio" onClick="fieldShower()">
<input type="radio" id="rad3" name="myRadio" onClick="fieldShower()">
<div id="textField1">Text1</div>
<div id="textField2">Text2</div>

KcH · Answer 2 · 2020-07-30T10:03:29.240

Hope this sample helps you :

var ex1 = document.getElementById('rad1');
var ex2 = document.getElementById('rad2');
var ex3 = document.getElementById('other');
var txt1 = document.getElementById('fname');
var txt2 = document.getElementById('lname');

ex1.onclick = handler;
ex2.onclick = handler1;
ex3.onclick = handler2;


function handler(){
    txt1.type='show';
    txt2.type='hidden';
}

function handler1(){
    txt2.type='show';
    txt1.type='hidden';
}

function handler2(){
    txt1.type='hidden';
    txt2.type='hidden';
}

  textField1:<input type="hidden" id="fname" name="fname"><br><br>
  
  textField2:<input type="hidden" id="lname" name="lname"><br><br>
  
  
<input type="radio" id="rad1" name="gender" value="male">
<label for="rad1">rad1</label><br>
<input type="radio" id="rad2" name="gender" value="female">
<label for="rad2">rad2</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">rad3</label>

Javascript radiobutton show and hide field

2 Answers2