CODEWITHSUNDEEP
javascripthtml
Krstf
Krstf

Reputation: 3

div not hiding when radio button clicked

I'm trying to make a form with radio buttons that show a different question depending on the selection made in the first question.

When an option is selected in the first question, the second question shows fine. But when you change the answer in the first question, the second question doesn't hide.

For Example: you have a radio button with two options: * Car * Bike

When you click "Car" the second question about the car shows up. But when a user made a mistake and changes the radio button to "Bike". The second question about the bike shows, but the one about the Car doesn't hide and both are showing.

function ShowCar() {
  document.getElementById('DivCar').style.display = "";
  document.getElementById('IpCar').disabled = false;

  document.getElementById('DivBike').style.display = "none";
  document.getElementById('IpBike').disabled = true;
}

function ShowBike() {
  document.getElementById('DivBike').style.display = "";
  document.getElementById('IpBike').disabled = false;

  document.getElementById('DivCar').style.display = "none";
  document.getElementById('IpCar').disabled = true;
}
<div id="prod">
  <table width="600" border="0" cellspacing="0" cellpadding="5">
    <tr>
      <td>Car or Bike?</td>
      <td>
        <form>
          <input type="radio" name="product" id="Car" value="Car" onChange="ShowCar()" /> Car<br>
          <input type="radio" name="product" id="Bike" value="Bike" onChange="ShowBike()" /> Bike<br>
        </form>
      </td>
    </tr>
  </table>
</div>
<br />
<div id="DivCar" style="display:none">
  <table width="600" border="0" cellspacing="0" cellpadding="5">
    <tr>
      <td>What type of car is it?</td>
      <td>
        <form>
          <input type="radio" name="IpCar" value="Car_Sedan"> Sedan<br>
          <input type="radio" name="IpCar" value="Car_Truck"> Truck<br>
        </form>
      </td>
    </tr>
  </table>
</div>
<br />
<div id="DivBike" style="display:none">
  <table width="600" border="0" cellspacing="0" cellpadding="5">
    <tr>
      <td>What type of bike is it?</td>
      <td>
        <form>
          <input type="radio" name="IpBike" value="Bike_Sports"> Sports<br>
          <input type="radio" name="IpBike" value="Bike_Chopper"> Chopper<br>
        </form>
      </td>
    </tr>
  </table>
</div>
<br />

Upvotes: 0

Views: 85

Answers (3)

9841pratik
9841pratik

Reputation: 195

function ShowCar() {

document.getElementById('DivCar').style.display = "";

document.getElementById('DivBike').style.display = "none"; }

function ShowBike() { document.getElementById('DivBike').style.display = "";

document.getElementById('DivCar').style.display = "none"; }

Upvotes: 0

Sudhir Ojha
Sudhir Ojha

Reputation: 3305

If you only want to show one selection at a time then you don't need to do extra. Just hide bike when car is click and hide car if bike is clicked. And your trying to disable the property using wrong selector.

document.getElementById('IpBike').disabled = true;

should be 

document.getElementById('Bike').disabled = true;

and

document.getElementById('IpCar').disabled = true;

should be 

document.getElementById('Car').disabled = true;

Try following:

<body>
<div id="prod">
  <table width="600" border="0" cellspacing="0" cellpadding="5">
    <tr>
      <td>Car or Bike?</td>
      <td><form>
        <input type="radio" name="product" id="Car" value="Car" onChange="ShowCar()" /> Car<br>
        <input type="radio" name="product" id="Bike" value="Bike" onChange="ShowBike()" /> Bike<br>
      </form></td>
    </tr>
  </table>
</div>
<br />
<div id="DivCar" style="display:none">
  <table width="600" border="0" cellspacing="0" cellpadding="5">
    <tr>
      <td>What type of car is it?</td>
      <td><form>
        <input type="radio" name="IpCar" value="Car_Sedan"> Sedan<br>
        <input type="radio" name="IpCar" value="Car_Truck"> Truck<br>
      </form></td>
    </tr>
  </table>
</div>
<br />
<div id="DivBike" style="display:none">
    <table width="600" border="0" cellspacing="0" cellpadding="5">
      <tr>
        <td>What type of bike is it?</td>
        <td><form>
          <input type="radio" name="IpBike" value="Bike_Sports"> Sports<br>
          <input type="radio" name="IpBike" value="Bike_Chopper"> Chopper<br>
        </form></td>
      </tr>
    </table>
  </div>
  <br />
</body>

<script type="text/javascript">

  function ShowCar()
  {
    document.getElementById('DivCar').style.display = "";
    document.getElementById('DivBike').style.display = "none";
    document.getElementById('Bike').disabled = true;// Use this line if you want to disable bike selection. Otherwise remove this line.
  }

  function ShowBike()
  {
    document.getElementById('DivBike').style.display = "";
    document.getElementById('DivCar').style.display = "none";
    document.getElementById('Car').disabled = true;// Use this line if you want to disable car selection. Otherwise remove this line.
  }

</script>

Upvotes: 1

MH2K9
MH2K9

Reputation: 12039

Your show/hide approach is OK but setting/removing the disabled attribute is arising the problem.

You are trying to select the HTML element by ID (IpBike, IpCar) which is no more exist. You have radio input field who's name are IpBike, IpCar.

So instead of getElementById you can use querySelectorAll()

Example code:

function ShowCar()
{
    document.getElementById('DivCar').style.display = "";
    Array.from(document.querySelectorAll('input[name="IpCar"]')).forEach(i => i.removeAttribute('disabled'));

    document.getElementById('DivBike').style.display = "none";
    Array.from(document.querySelectorAll('input[name="IpBike"]')).forEach(i => i.setAttribute('disabled', 'disabled'));

}

function ShowBike()
{
    document.getElementById('DivBike').style.display = "";
    Array.from(document.querySelectorAll('input[name="IpBike"]')).forEach(i => i.removeAttribute('disabled'));

    document.getElementById('DivCar').style.display = "none";
    Array.from(document.querySelectorAll('input[name="IpCar"]')).forEach(i => i.setAttribute('disabled', 'disabled'));
}
<body>
<div id="prod">
    <table width="600" border="0" cellspacing="0" cellpadding="5">
        <tr>
            <td>Car or Bike?</td>
            <td><form>
                <input type="radio" name="product" id="Car" value="Car" onChange="ShowCar()" /> Car<br>
                <input type="radio" name="product" id="Bike" value="Bike" onChange="ShowBike()" /> Bike<br>
            </form></td>
        </tr>
    </table>
</div>
<br />
<div id="DivCar" style="display:none">
    <table width="600" border="0" cellspacing="0" cellpadding="5">
        <tr>
            <td>What type of car is it?</td>
            <td><form>
                <input type="radio" name="IpCar" value="Car_Sedan"> Sedan<br>
                <input type="radio" name="IpCar" value="Car_Truck"> Truck<br>
            </form></td>
        </tr>
    </table>
</div>
<br />
<div id="DivBike" style="display:none">
    <table width="600" border="0" cellspacing="0" cellpadding="5">
        <tr>
            <td>What type of bike is it?</td>
            <td><form>
                <input type="radio" name="IpBike" value="Bike_Sports"> Sports<br>
                <input type="radio" name="IpBike" value="Bike_Chopper"> Chopper<br>
            </form></td>
        </tr>
    </table>
</div>

Upvotes: 3

Related Questions