CODEWITHSUNDEEP
javascriptjqueryhtmlradio-button
user3167515
user3167515

Reputation: 33

How to display an element when radio button is selected and hide it when is not selected using javascript?

I want to make an interactive online form. When people select one option of the 1st question, the according element will display when it is selected and hide when the other option is selected. (Other element should display when the other button is selected)

This is the code I have so far.

function showStuff(id, btn) {
  if (document.getElementById(id).style.display == "none") {
    document.getElementById(id).style.display = 'block';
  } else if (document.getElementById(id).style.display == 'block') {
    document.getElementById(id).style.display = 'none';
  }
}
<input name="q1" type="radio" value="A" onchange="showStuff('A', this); return false;" />
<input name="q1" type="radio" value="B" onchange="showStuff('B', this); return false;" />

<div id="A" style="display:none">
  This should display only when A button is clicked
</div>
<div id="B" style="display:none">
  This should display only when B button is clicked
</div>

Once I display it, I cannot hide it when I select the other option. Do you have any good advice, please? Thanks very much!

Upvotes: 1

Views: 1643

Answers (4)

Sandeep Nayak
Sandeep Nayak

Reputation: 4757

You are almost there..just add one line of code to hide both divs on each click.

Using jQuery:

$("#A,#B").hide();

Without jQuery:

document.getElementById("A").style.display = 'none'; document.getElementById("B").style.display = 'none';

See full working code below:

function showStuff(id, btn) {
  $("#A,#B").hide(); // hide both each time

  document.getElementById(id).style.display = 'block';

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="q1" type="radio" value="A" onchange="showStuff('A', this); return false;" />
<input name="q1" type="radio" value="B" onchange="showStuff('B', this); return false;" />

<div id="A" style="display:none">
  This should display only when A button is clicked
</div>

<div id="B" style="display:none">
  This should display only when B button is clicked
</div>

Upvotes: 2

Gowtham
Gowtham

Reputation: 1597

function showStuff(value,btn) {
  if(value=='A'){
  document.getElementById("A").style.display = 'block';
  document.getElementById("B").style.display = 'none';
  }
   else if(value=='B'){
     document.getElementById("B").style.display = 'block';
  document.getElementById("A").style.display = 'none';
   }
      
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
<input name="q1"  type="radio" value="A" onchange="showStuff('A', this); return false;" />
<input name="q1"  type="radio" value="B" onchange="showStuff('B', this); return false;"/>

<div id="A"  style="display:none">
This should display only when A button is clicked
</div>

<div id="B"  style="display:none">
This should display only when B button is clicked
</div>  </body>

</html>

Upvotes: 0

Wax Cage
Wax Cage

Reputation: 788

I would recommend this function

function showStuff(id, btn) {
    document.getElementById('A').style.display = 'none';
    document.getElementById('B').style.display = 'none';

    document.getElementById(id).style.display = 'block';
}

Just dont forget hide all available options at the beggining of the function if you ever add another one.

With jQuery things could be much easier - you can select all inputs using selector $('input[name=q1]') and hide all option using just one line.

$('input[name=q1]').hide();

Upvotes: 1

piotrb
piotrb

Reputation: 53

Try this:

<script type="text/javascript">
function showStuff(id, btn) {
    document.getElementById("A").style.display = 'none';
    document.getElementById("B").style.display = 'none';
    if (id == "A") {
        document.getElementById("A").style.display = 'block';
    } else {
        document.getElementById("B").style.display = 'block';
    }

}
</script>

Upvotes: 1

Related Questions