Hide or show form elements with Javascript, partially working

Question

Only the last pair of radio buttons work to reveal the last name field, when subscribe is clicked.

The target is that whenever one or more subscribe is selected, the last name field is always shown. When no unsubscribe is selected the last name field is hidden. Clicking the various radio buttons should create those results. Thanks in advance.

Simple HTML Form

<form>
  Adhoc <br>
  <input class="subscribe" type="radio" name="news_adhoc" onClick="test();"> subscribe <br>
  <input class="unsubscribe" type="radio" name="news_adhoc" onClick="test();"> unsubscribe <br>
  <hr> news_newsletter <br>
  <input class="subscribe" type="radio" name="news_newsletter" onClick="test();"> subscribe <br>
  <input class="unsubscribe" type="radio" name="news_newsletter" onClick="test();"> unsubscribe <br>
  <hr>
  <input type="text" name="first_name" placeholder="First Name">
  <input type="text" name="last_name" id="IdLastName" placeholder="Last Name" style="display:none">
  <input type="text" name="email" placeholder="Email">
  <hr>
</form>

Script and thanks to Randy Casburn for earlier assistance.

<script type = "text/javascript" >
  function test() {
    var subscr = document.getElementsByClassName("subscribe");
    var unsubscr = document.getElementsByClassName("unsubscribe");
    var lastName = document.getElementById("IdLastName");

    for (var i = 0; i < subscr.length; i++) {

      if (subscr[i].checked) {
        lastName.style.display = "";
      } else {
        lastName.style.display = "none";
      }
    }
  }

Answer 1

Try (you write about first_name, but your code snippet show/hide last_name - so I show how to do it for last name - to change this change var lastName = document.getElementById("2"); to var lastName = document.getElementById("1"); (I edit only JS code - HTML unchanged)

 function test() { var subscr = document.getElementsByClassName("subscribe"); var lastName = document.getElementById("2"); lastName.style.display = "none"; let show=false; for (var i = 0; i < subscr.length; i++) { if(subscr[i].checked) show=true; } if(show) lastName.style.display = ""; }

 <form> Adhoc <br> <input class="subscribe" type="radio" name="news_adhoc" onClick="test();"> subscribe <br> <input class="unsubscribe" type="radio" name="news_adhoc" onClick="test();"> unsubscribe <br> <hr> news_newsletter <br> <input class="subscribe" type="radio" name="news_newsletter" onClick="test();"> subscribe <br> <input class="unsubscribe" type="radio" name="news_newsletter" onClick="test();"> unsubscribe <br> <hr> <input type="text" name="first_name" id="1" placeholder="First Name"> <input type="text" name="last_name" id="2" placeholder="Last Name" style="display:none"> <input type="text" name="email" id="3" placeholder="Email"> <hr> </form>

Answer 2

I guess this is what you are looking for

 document.getElementById("fn").style.visibility = "hidden"; function test() { var subscr = document.getElementsByClassName("subscribe"); var unsubscr = document.getElementsByClassName("unsubscribe"); var lastName = document.getElementById("2"); for (var i = 0; i < subscr.length; i++) { if (subscr[i].checked) { lastName.style.display = ""; document.getElementById("fn").style.visibility = "initial"; } else { lastName.style.display = "none"; } } }

 <form> Adhoc <br> <input class="subscribe" type="radio" name="news_adhoc" onClick="test();" > subscribe <br> <input class="unsubscribe" type="radio" name="news_adhoc" onClick="test();" > unsubscribe <br> <hr> news_newsletter <br> <input class="subscribe" type="radio" name="news_newsletter" onClick="test();" > subscribe <br> <input class="unsubscribe" type="radio" name="news_newsletter" onClick="test();" > unsubscribe <br> <hr> <input type="text" id="fn" name="first_name" id="1" placeholder="First Name"> <input type="text" name="last_name" id="2" placeholder="Last Name" style="display:none" > <input type="text" name="email" id="3" placeholder="Email" > <hr> </form>

Answer 3

Here, tidied up a bit. NOTE: id="1" is invalid, recommend a change.

 const getRadioButtons = () => Array.from(document.querySelectorAll('input[type="radio"]')); const getName = () => document.querySelector('input[name="first_name"'); document.addEventListener('DOMContentLoaded', () => { let radioButtons = getRadioButtons(); let name = getName(); radioButtons.forEach(b => { b.addEventListener('change', (event) => { let show = (radioButtons.some(e => e.checked)) ? "block" : "none"; name.style.display = show; }); }); });

 input[name="first_name"] { display: none; }

 <p>The target is that whenever one or more 'subscribe' is selected, the 'first name' field is always shown. When no 'unsubscribe' is selected the 'first name field is hidden. Clicking the various radio should create those results. Thanks in advance.</p> <form> Adhoc <br> <input class="subscribe" type="radio" name="news_adhoc" > subscribe <br> <input class="unsubscribe" type="radio" name="news_adhoc" > unsubscribe <br> <hr> news_newsletter <br> <input class="subscribe" type="radio" name="news_newsletter" > subscribe <br> <input class="unsubscribe" type="radio" name="news_newsletter" > unsubscribe <br> <hr> <input type="text" name="first_name" id="1" placeholder="First Name"> <input type="text" name="last_name" id="2" placeholder="Last Name" style="display:none"> <input type="text" name="email" id="3" placeholder="Email"> <hr> </form>