Frustratingly simple Javascript Help Required

Question

I am making a form field where I would like to do a simple show-hide to display div's on a radio button.

<form id="basic" name="basic"> <label><input name="formelement" type="radio" value="yes" /> Yes </label> <label><input name="formelement" type="radio" value="no" /> No </label> <div id="yes" style="display: none;"> This is the div that displays that shows when 'Yes' is selected. </div> <div id="no" style="display: none;"> This is the div that displays that shows when 'No' is selected. </div> </form>

I have played with some various javascript's I have found online and have achieved not a lot of success as most of them online manage to show-hide one div. Getting the 'yes' to hide when 'no' is selected and vice-versa is the tricky part. If anyone could provide some assistance that would be really appreciated!

you may want to use JQuery. Take a walk-through at their tutorial, you will be able to do that with much ease w3schools.com/jquery/default.asp — Hoàng Long
– Hoàng Long, Commented Jul 5, 2012 at 4:10
W3Schools is not regarded as one of the best places to learn JavaScript / jQuery (see W3Fools.com). A well-respected alternative for JavaScript is MDC's JavaScript Guide (developer.mozilla.org/en/JavaScript) . For jQuery, check out jQuery's documentation (docs.jquery.com/Main_Page) — N30
– N30, Commented Jul 5, 2012 at 4:17

The Alpha · Accepted Answer · 2012-07-05 04:34:34Z

Just paste these code between head tags

<script type="text/javascript"> window.onload=function(){ var el1 = document.getElementsByName('formelement')[0]; var el2 = document.getElementsByName('formelement')[1]; el1.onchange=function(){ var show=el1.value; var hide=el2.value; document.getElementById(show).style.display='block'; document.getElementById(hide).style.display='none'; } el2.onchange=function(){ var show=el2.value; var hide=el1.value; document.getElementById(show).style.display='block'; document.getElementById(hide).style.display='none'; } } </script>

DEMO.

UltraInstinct · Accepted Answer · 2012-07-05 04:10:24Z

The below is assuming value of radio is same as id of the div..

function getRadioVal(name){ var oRadio = document.forms[0].elements[name]; for(var i = 0; i < oRadio.length; i++) if(oRadio[i].checked) return oRadio[i].value; return ''; } //hide both divs.. document.getElementById("yes").style.display = "none"; document.getElementById("no").style.display = "none"; //show only one of them.. document.getElementById(getRadioVal("formelement")) = "block";

Dealing with javascript without any libraries is a pain when things get complex, I would recommend libraries such as jQuery

Community · Accepted Answer · 2017-05-23 10:34:27Z

this is what you want

How can I check whether a radio button is selected with JavaScript?

assign onclick event and you are good to go.

Collectives™ on Stack Overflow

Frustratingly simple Javascript Help Required

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related