Show/Hide divs on Form with multiple radio groups

Question

I'm trying to create a form with 10+ questions on it.

Each question with have three answer options, "Yes" "No" "Not applicable" which are chosen via radio buttons.

When "No" is selected a div is shown with additional information, this would be applicable for each question.

Not being great at Javascript I consulted Stack Overflow, found something and have failed miserably to amend it:

<script type="text/javascript">

function yesnoCheck() {
    if (document.getElementById('noCheck').checked) {
        document.getElementById('ifNo').style.display = 'block';
    }
    else document.getElementById('ifNo').style.display = 'none';

}

</script>


<p>Question 1</p>

<input type="radio" onclick="javascript:yesnoCheck();" name="q1" id="yesCheck"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q1" id="noCheck"> No <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q1" id="naCheck"> Not applicable <br>
    <div id="ifNo" style="display:none">
        <p>Recommendation goes here</p>
    </div>

<h2>Section header</h2>        

<p>Question 2</p>

<input type="radio" onclick="javascript:yesnoCheck();" name="q2" id="yesCheck"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q2" id="noCheck"> No <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q2" id="naCheck"> Not applicable <br>
    <div id="ifNo" style="display:none">
        <p>Recommendation goes here</p>
    </div>


<p>Question 3</p>

<input type="radio" onclick="javascript:yesnoCheck();" name="q3" id="yesCheck"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q3" id="noCheck"> No <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q3" id="naCheck"> Not applicable <br>
    <div id="ifNo" style="display:none">
        <p>Recommendation goes here</p>
    </div>

This only works on the first question but not the others.

The intention is for this to go in a rails app and the number of questions could be large (more than 10) so was trying to create a short piece of code that would work on all questions.

Any help, from someone who knows what they're talking about (i.e. not me) would be extremely appreciated.

You are using same id for three div (ifNo). Try change it to class and use jQuery to show or hide the div. Refer this for jquery usage on multiple classes: http://stackoverflow.com/a/5564019/1640257 — IMPENTA, Sep 21 '15 at 09:02

score 1 · Answer 1 · answered Sep 21 '15 at 09:00

Is not valid html to have more than one element with the same id. You have multiple elements with id id=noCheck. When javascript code is executed the function getElementById() is looking for a single element, and returns the first one, that's why only the first div is showing.

You could assign the same name to every "No" radiobutton and use getElementsByName() instead. This returns a collection of elements, and then you could iterate over them to show all divs that must be shown.

Vamsi · Answer 2 · 2015-09-21T09:38:20.057

Using same id for different elements in a html code is a bad way. You need to create different id's for different questions like:

<p>Question 1</p>

<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q1" id="yesCheck1"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q1" id="noCheck1"> No <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q1" id="naCheck1"> Not applicable <br>
<div id="ifNo1" style="display:none">
<p>Recommendation goes here</p>

<h2>Section header</h2>        

<p>Question 2</p>

<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q2" id="yesCheck2"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q2" id="noCheck2"> No <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q2" id="naCheck2"> Not applicable <br>
<div id="ifNo2" style="display:none">
<p>Recommendation goes here</p>

<p>Question 3</p>

<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q3" id="yesCheck3"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q3" id="noCheck3"> No <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q3" id="naCheck3"> Not applicable <br>
<div id="ifNo3" style="display:none">
    <p>Recommendation goes here</p>
</div>

now in your javascript code:

function yesnoCheck() {

newId = id.split('k')[1]; //this will give 2 in "q2" (splitting)

var noCheck = "noCheck"
newNoCheck = noCheck.concat(newId);  //if the newId is 2 then it will be "noCheck2"

var ifNo = "ifNo"
newifNo = ifNo.concat(newId);  //if the newId is 2 then it will be "ifNo2"

if (document.getElementById(newNoCheck).checked) {
document.getElementById(newifNo).style.display = 'block';
}
else document.getElementById(newifNo).style.display = 'none';

}

You can find the working jsfiddle here

score 1 · Accepted Answer · answered Sep 21 '15 at 09:26

Do not use same id more than once. Here https://jsfiddle.net/o2kdb8ej/ you can find simple solution using jQuery, without any ids specified applicable for any number of questions. The main idea is to specify value for each radio button, handling change event for each radio button on the page, and in that handler check its value, and according to its value hide or show specified p element.

Show/Hide divs on Form with multiple radio groups

3 Answers3