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

Popular posts from this blog

java - Date formats difference between yyyy-MM-dd'T'HH:mm:ss and yyyy-MM-dd'T'HH:mm:ssXXX -

c# - Get rid of xmlns attribute when adding node to existing xml -