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"; } } }

Well spotted. Thanks. My question is now edited to 'last name.' — Stephen
– Stephen, Commented Feb 6, 2019 at 21:40

Kamil Kiełczewski · Accepted Answer · 2019-02-06 21:48:14Z

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>

"...you write about first_name, but your code snippet show/hide last_name." Thanks Kami. I've edited my question
Thank you. This works great. I updated my local copy from id="2" to id="IdLastName". E.g. var lastName = document.getElementById("IdLastName");

ellipsis · Accepted Answer · 2019-02-06 03:35:24Z

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>

Bibberty · Accepted Answer · 2019-02-06 03:48:01Z

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>

take a look at the code I provided. It only shows/hides firstname. But you can easily add the extra lines. will work for you I think.

Collectives™ on Stack Overflow

Hide or show form elements with Javascript, partially working

3 Answers 3

2 Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Related