title: Example of jQuery Mobile site with conditional/branching questions
body: <p>I'm trying to create a JQM survey with branching questions--i.e. in a survey with questions 1-3, if you choose a particular answer on question 1, a question is dynamically added between questions 1 and 2. </p>
  
  <p>UPDATE: I made an attempt ( <a href="https://dl.dropbox.com/u/17841063/site2/index-c1.html#page2" rel="nofollow">https://dl.dropbox.com/u/17841063/site2/index-c1.html#page2</a> ) that works by matching the value of a radio button to the name of a hidden div--if there's a match, it unhides the div. The problem right now is that if you change your answer back to an option that wouldn't trigger the conditional question, it doesn't re-hide. For example, clicking No or Unsure in question A1 causes question A2 to appear, but if you then click Yes in A1, A2 still remains...</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  // 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&lt;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&lt;hide.length;i++) 
      document.getElementById(hide[i]).style.display='none'; // Hide the elements in "hide" array
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Here's are the radio buttons that use the script above:</p>
  
  <pre><code> &lt;div data-role="fieldcontain"&gt;
          &lt;fieldset data-role="controlgroup" data-type="horizontal"&gt;
            &lt;legend&gt;(Question A1) A prominent accident smokes on top of the blessed reactionary?&lt;/legend&gt;
            &lt;input type="radio" name="aaa" id="aaa_0" value="notA2" /&gt;
            &lt;label for="aaa_0"&gt;Yes&lt;/label&gt;
            &lt;input type="radio" name="aaa" id="aaa_1" value="A2" /&gt;
            &lt;label for="aaa_1"&gt;No&lt;/label&gt;
            &lt;input type="radio" name="aaa" id="aaa_2" value="A2" /&gt;
            &lt;label for="aaa_2"&gt;Unsure&lt;/label&gt;
          &lt;/fieldset&gt;
        &lt;/div&gt;
       &lt;div id="A2" data-role="fieldcontain"&gt;
          &lt;fieldset data-role="controlgroup" data-type="horizontal"&gt;
            &lt;legend&gt;(Question A2) Does a married composite remainder the shallow whistle??&lt;/legend&gt;
            &lt;input type="radio" name="bbb" id="bbb_0" value="" /&gt;
            &lt;label for="bbb_0"&gt;Yes&lt;/label&gt;
            &lt;input type="radio" name="bbb" id="bbb_1" value="" /&gt;
            &lt;label for="bbb_1"&gt;No&lt;/label&gt;
            &lt;input type="radio" name="bbb" id="bbb_2" value="" /&gt;
            &lt;label for="bbb_2"&gt;Unsure&lt;/label&gt;
         &lt;/fieldset&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>If anyone has ideas about fixing this, or examples of other ways to do branching forms, I'd be very grateful!</p>
  
  <p>Thanks,
  Patrick</p>