All geek questions in one place

JQuery example Mobile site with conditional / branching questions

I am trying to create a JQM poll with branching questions - i.e. in a survey with questions 1-3, if you choose a specific answer to question 1, the question will be dynamically added between questions 1 and 2.

UPDATE: I tried ( https://dl.dropbox.com/u/17841063/site2/index-c1.html#page2 ), which works by matching the value of the switch with the name of the hidden div - If there is a match, it displays the div. The problem right now is that if you change your answer to an option that does not raise a conditional question, it will not be hidden. For example, clicking the No or Unsure button in question A1 raises question A2, but if you then click Yes in A1, A2 will still remain ...

<script type="text/javascript"> // Place in this array the ID of the element you want to hide var hide=['A2','A4']; function setOpt() { resetOpt(); // Call the resetOpt function. Hide some elements in the "hide" array. for(var i=0,sel=document.getElementsByTagName('input');i<sel.length;i++) { sel[i].onchange=function() { if(this.parentNode.tagName.toLowerCase()!='div') resetOpt(); // Hides the elements in "hide" array when the first select element is choosen try { document.getElementById(this.value).style.display=''; } catch(e){} ; // When the value of the element is not an element ID } } } window.addEventListener?window.addEventListener('load',setOpt,false): window.attachEvent('onload',setOpt); function resetOpt() { for(var i=0;i<hide.length;i++) document.getElementById(hide[i]).style.display='none'; // Hide the elements in "hide" array } </script>

Here are the radio buttons that use the script above:

  <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>(Question A1) A prominent accident smokes on top of the blessed reactionary?</legend> <input type="radio" name="aaa" id="aaa_0" value="notA2" /> <label for="aaa_0">Yes</label> <input type="radio" name="aaa" id="aaa_1" value="A2" /> <label for="aaa_1">No</label> <input type="radio" name="aaa" id="aaa_2" value="A2" /> <label for="aaa_2">Unsure</label> </fieldset> </div> <div id="A2" data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>(Question A2) Does a married composite remainder the shallow whistle??</legend> <input type="radio" name="bbb" id="bbb_0" value="" /> <label for="bbb_0">Yes</label> <input type="radio" name="bbb" id="bbb_1" value="" /> <label for="bbb_1">No</label> <input type="radio" name="bbb" id="bbb_2" value="" /> <label for="bbb_2">Unsure</label> </fieldset> </div>

If anyone has ideas for fixing this or examples of other ways to create branching forms, I would really appreciate it!

Thanks Patrick

+4
source share
1 answer

I played around with your example a bit, deleted all your regular JavaScript and added some jQuery Mobile script style, see working example here

  <script> $("input[type='radio']").bind( "change", function(event, ui) { var mySelection = $('input[name=aaa]:checked').val(); //alert(mySelection); if (mySelection == "A2") { $('#A2').removeClass('ui-hidden-accessible'); } else { $('#A2').addClass('ui-hidden-accessible'); }; }); </script>
0
source

Source: https://habr.com/ru/post/1444696/

More articles:


All Articles