CODEWITHSUNDEEP
javascriptforms
John_rees
John_rees

Reputation: 123

show/hide Form element using radio button

Here is my code. If I click on From's radio button, it will display 2 more options. If I click on To's radio button, it will display 2 more options. But if I click on Full Day's radio button, options From and To should disappear.

When I click on Full Day, only one option disappears. I want both to disappear. How can I do this?

function show1() {
  document.getElementById('div1').style.display = 'none';
}

function show2() {
  document.getElementById('div1').style.display = 'block';
}

function show3() {
  document.getElementById('div2').style.display = 'block';
}
body {
  font-family: arial;
}

.hide {
  display: none;
}

p {
  font-weight: bold;
}
<p>Leave</p>
<input type="radio" name="tab" value="igotnone" onclick="show1();" /> Full Day
<input type="radio" name="tab1" value="igottwo" onclick="show2();" /> From
<input type="radio" name="tab2" value="igottwo" onclick="show3();" /> To

<div id="div1" class="hide">
  <hr>
  <p>From Which Half Session You Are Not Available???</p>
  <input type="radio" value="Yes" name="one"> First Session&nbsp;
  <input type="radio" value="Yes" name="one"> Second Session
</div>

<div id="div2" class="hide">
  <hr>
  <p>To Which Half Session You Are Not Available???</p>
  <input type="radio" value="Yes" name="two"> First Session&nbsp;
  <input type="radio" value="Yes" name="two"> Second Session
</div>

Upvotes: 0

Views: 51

Answers (2)

Anagha
Anagha

Reputation: 136

Firstly the name of all the radio button should be same. So, it can select one at a time. second the div you are displaying at the same time hide the other div.

function show1() {
  document.getElementById('div1').style.display = 'none';
  document.getElementById('div2').style.display = 'none';
}

function show2() {
document.getElementById('div2').style.display = 'none';
  document.getElementById('div1').style.display = 'block';
}

function show3() {
document.getElementById('div1').style.display = 'none';
  document.getElementById('div2').style.display = 'block';
}
body {
  font-family: arial;
}

.hide {
  display: none;
}

p {
  font-weight: bold;
}
<p>Leave</p>
<input type="radio" name="tab" value="igotnone" onclick="show1();" /> Full Day
<input type="radio" name="tab" value="igottwo" onclick="show2();" /> From
<input type="radio" name="tab" value="igottwo" onclick="show3();" /> To

<div id="div1" class="hide">
  <hr>
  <p>From Which Half Session You Are Not Available???</p>
  <input type="radio" value="Yes" name="one"> First Session&nbsp;
  <input type="radio" value="Yes" name="one"> Second Session
</div>

<div id="div2" class="hide">
  <hr>
  <p>To Which Half Session You Are Not Available???</p>
  <input type="radio" value="Yes" name="two"> First Session&nbsp;
  <input type="radio" value="Yes" name="two"> Second Session
</div>

Upvotes: 0

31piy
31piy

Reputation: 23869

You may wrap the two divs into one div and show/hide that only.

Moreover, radio buttons should share the same name to allow users to choose only one option at a time.

function show1() {
  document.getElementById('divs').style.display = 'none';
}

function show2() {
  document.getElementById('divs').style.display = 'block';
}

function show3() {
  document.getElementById('divs').style.display = 'block';
}
body {
  font-family: arial;
}

.hide {
  display: none;
}

p {
  font-weight: bold;
}
<p>Leave</p>
<input type="radio" name="tab" value="igotnone" onclick="show1();" /> Full Day
<input type="radio" name="tab" value="igottwo" onclick="show2();" /> From
<input type="radio" name="tab" value="igottwo" onclick="show3();" /> To

<div id="divs" class="hide">
  <div id="div1">
    <hr>
    <p>From Which Half Session You Are Not Available???</p>
    <input type="radio" value="Yes" name="one"> First Session&nbsp;
    <input type="radio" value="Yes" name="one"> Second Session
  </div>

  <div id="div2">
    <hr>
    <p>To Which Half Session You Are Not Available???</p>
    <input type="radio" value="Yes" name="two"> First Session&nbsp;
    <input type="radio" value="Yes" name="two"> Second Session
  </div>
</div>

Upvotes: 1

Related Questions