Question 43351 in Html Question posted in
Some basic documentation can be found here.

javascript display/hide HTML element from radio button selection

I have 3 radio buttons in a group called "PersBus" and I’m trying to use them to select what content to show on a registration form. Value 1 = personal, Value 2 = Business, Value 3 = Both. So, for "1" I only want to show the form for Personal registration, and so on. I’m brand new to js and

I did search quite a bit both here and on w3Schools to get this far, but no dice.

I can get the alerts to fire as expected, but I just can’t seem to get the "grdPersonal" to show/hide. I’ve also tried .style.visibility visible/hidden and no luck.

What am I missing? Is there a better way?

function handleClick(PersBus) {
  var x = PersBus.value;
  var y = document.getElementById("grdPersonal");
  if (x === "1") {
    alert(x);
    y.style.display = "none";
  } else {
    alert(x);
    document.getElementById("grdPersonal").style.display = 'none';
  }

}
<div class="item1">
  <asp:RadioButton ID="radPersonal" runat="server" GroupName="PersBus" Checked="true" onclick="handleClick(this);" value="1" />
</div>
<div class="item2">
  <asp:RadioButton ID="radBusiness" runat="server" GroupName="PersBus" onclick="handleClick(this);" value="2" />
</div>
<div class="item3">
  <asp:RadioButton ID="radBoth" runat="server" GroupName="PersBus" onclick="handleClick(this);" value="3" />
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Ok. I finally figured it out. My "grdPersonal" element had a runat="server" attribute that caused it to call the function before the element was created, which it why I was getting the "cannot read properties of null"

    Thanks everyone for the help. Always learning.


  2. 0

    As stated in the comments, you are hiding (display: none) the element in both cases.

    function handleClick(PersBus) {
  var x = PersBus.value;
  var y = document.getElementById("grdPersonal");
  if (x === "1") {
    alert(x);
    y.style.display = "none";
  } else {
    alert(x);
    y.style.display = 'block'; //change this
  }

}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search