javascript - Show/Hide divs on Form with multiple radio groups -
i'm trying create form 10+ questions on it.
each question have 3 answer options, "yes" "no" "not applicable" chosen via radio buttons.
when "no" selected div shown additional information, applicable each question.
not being great @ javascript consulted stack overflow, found , have failed miserably 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 works on first question not others.
the intention go in rails app , number of questions large (more 10) trying create short piece of code work on questions.
any help, knows they're talking (i.e. not me) extremely appreciated.
do not use same id more once. here https://jsfiddle.net/o2kdb8ej/ can find simple solution using jquery, without ids specified applicable number of questions. main idea specify value each radio button, handling change
event each radio button on page, , in handler check value, , according value hide or show specified p
element.
Comments
Post a Comment