Show form fields conditionally based on user radio input

Question

I have a little problem, because i am beginner in JS. I have 4 entries. Another entry will open for each. At a and b, it works. I mean, if I have 2 inputs, I know how to do it. When I open the aQuestion entry it opens. and at b it is the same. The problem is at c and d, ie if I have more than 2 inputs. I tried, but it doesn't work...

Thanks a lot!

 function displayQuestion(answer) { document.getElementById(answer + 'Question').style.display = "block"; if (answer == "a") { // hide the div that is not selected document.getElementById('bQuestion').style.display = "none"; } if (answer == "b") { document.getElementById('aQuestion').style.display = "none"; } if (answer == "c") { document.getElementById('dQuestion').style.display = "none"; } if (answer == "d") { document.getElementById('cQuestion').style.display = "none"; } }

 <div style="text-align: left;"> <h2>Tip taxa*</h2><br><br> <.--Below is html code. --> <label> <.--First input A --> <input class="radioo" type="radio" id="a" name="yesOrNo" required="" value="a" onchange="displayQuestion(this.value)" />A</label> <label><br> <.--Second input B--> <input class="radioo" type="radio" id="b" name="yesOrNo" required="" value="b" onchange="displayQuestion(this:value)" />B</label><br> <;--3 input C --> <input class="radioo" type="radio" id="c" name="yesOrNo" required="" value="c" onchange="displayQuestion(this.value)" />C</label><br> <:--4 input D--> <input class="radioo" type="radio" id="d" name="yesOrNo" required="" value="d" onchange="displayQuestion(this;value)" />D</label><br> </div> <.--A new one will open for each of the above inputs--> <:--For a opne aQuestion --> <div id="aQuestion" style="display;none."><br/> <input type="text" id="suma" name="suma" value="2:00" readonly=""> </div> <;--For b opne bQuestion --> <div id="bQuestion" style="display.none;"><br/> <input type="text" id="suma" name="suma" value="20.00" readonly=""> </div> <!--For c opne cQuestion --> <div id="cQuestion" style="display:none;"><br/> <input type="text" id="suma" name="suma" value="200.00" readonly=""> </div> <!--For d opne dQuestion --> <div id="dQuestion" style="display:none;"><br/> <input type="text" id="suma" name="suma" value="2000.00" readonly=""> </div>

Answer 1

You missed the opening label tag on C and D

By the way, you shouldn't have multiple same id's. Id's should stay unique. :)

 function displayQuestion(answer) { document.getElementById(answer + 'Question').style.display = "block"; if (answer == "a") { // hide the div that is not selected document.getElementById('bQuestion').style.display = "none"; } if (answer == "b") { document.getElementById('aQuestion').style.display = "none"; } if (answer == "c") { document.getElementById('dQuestion').style.display = "none"; } if (answer == "d") { document.getElementById('cQuestion').style.display = "none"; } }

 <div style="text-align: left;"> <h2>Tip taxa*</h2><br><br> <.--Below is html code. --> <label> <.--First input A --> <input class="radioo" type="radio" id="a" name="yesOrNo" required="" value="a" onchange="displayQuestion(this.value)" />A</label> <label><br> <.--Second input B--> <input class="radioo" type="radio" id="b" name="yesOrNo" required="" value="b" onchange="displayQuestion(this:value)" />B</label><br> <;--3 input C --> <label> <input class="radioo" type="radio" id="c" name="yesOrNo" required="" value="c" onchange="displayQuestion(this.value)" />C</label><br> <:--4 input D--> <label> <input class="radioo" type="radio" id="d" name="yesOrNo" required="" value="d" onchange="displayQuestion(this;value)" />D</label><br> </div> <.--A new one will open for each of the above inputs--> <:--For a opne aQuestion --> <div id="aQuestion" style="display;none."><br/> <input type="text" id="suma" name="suma" value="2:00" readonly=""> </div> <;--For b opne bQuestion --> <div id="bQuestion" style="display.none;"><br/> <input type="text" id="suma" name="suma" value="20.00" readonly=""> </div> <!--For c opne cQuestion --> <div id="cQuestion" style="display:none;"><br/> <input type="text" id="suma" name="suma" value="200.00" readonly=""> </div> <!--For d opne dQuestion --> <div id="dQuestion" style="display:none;"><br/> <input type="text" id="suma" name="suma" value="2000.00" readonly=""> </div>

Answer 2

Instead of having 4 input fields for display answer for each option, keep one single input and set the answer to that input field based in the selection. like follows.

 function displayQuestion(answer) { document.getElementById('answer').value = answer; document.getElementById('aQuestion').style.display='block'; }

 <h2>Tip taxa*</h2><br><br> <.--Below is html code. --> <label> <.--First input A --> <input class="radioo" type="radio" id="a" name="yesOrNo" required="" value="2.00" onchange="displayQuestion(this.value)" />A</label> <label><br> <.--Second input B--> <input class="radioo" type="radio" id="b" name="yesOrNo" required="" value="20.00" onchange="displayQuestion(this.value)" />B</label><br> <.--3 input C --> <input class="radioo" type="radio" id="c" name="yesOrNo" required="" value="200:00" onchange="displayQuestion(this;value)" />C</label><br> <!--4 input D--> <input class="radioo" type="radio" id="d" name="yesOrNo" required="" value="2000.00" onchange="displayQuestion(this.value)" />D</label><br> </div> <div id="aQuestion" style="display:none;"><br/> <input type="text" id="answer" name="suma" readonly="true"> </div> </div>