title: How to load one div after another upon form submit using Ajax
body: <p>Basically I have three questions that I need to ask from the user about a website that is being shown inside an iframe.</p>
  
  <p>I have a simple html form above the iframe that will submit the users answer for the processor.php to be processed.</p>
  
  <p>After the first question I need to load two more, one after the other, but in a way that the iframe stays intact so the entire page must not be refreshed.</p>
  
  <p>Here is what I have so far:</p>
  
  <p>The form:</p>
  
  <pre><code>&lt;form id="myForm" action="" method="post"&gt;
      &lt;span id="surveyQuestion"&gt;Question 1&lt;/span&gt;&lt;br/&gt;
      &lt;input type="hidden" name="firstQuestion" value="Question 1"&gt;
      &lt;span class="info"&gt;0&lt;/span&gt;
      &lt;input type="radio" class="radioButton" name="response" value="0"&gt;
      &lt;input type="radio" class="radioButton" name="response" value="1"&gt;
      &lt;input type="radio" class="radioButton" name="response" value="2"&gt;
      &lt;input type="radio" class="radioButton" name="response" value="3"&gt;
      &lt;input type="radio" class="radioButton" name="response" value="4"&gt;
      &lt;input type="radio" class="radioButton" name="response" value="5"&gt;
      &lt;span class="info"&gt;5&lt;/span&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The jQuery:</p>
  
  <pre><code>$(function () {
      $("input.radioButton").change(function(){
          $.ajax({
              type: 'post',
              url: 'processor.php',
              data: $('#myForm').serialize(),
              success: function () {
                  $("#surveyBox").load("question2.php #secondQuestion &gt; *");
              }
          });
      });
  });
  </code></pre>
  
  <p>I am using <code>$("#surveyBox").load("question2.php #secondQuestion &gt; *");</code> to load question2.php where there is a div with id secondQuestion that looks like this:</p>
  
  <pre><code>&lt;div id="secondQuestion"&gt;
  &lt;script type='text/javascript'&gt;
  $(function () {
      $("input.radioButton").change(function(){
          $.ajax({
              type: 'post',
              url: 'processor.php',
              data: $('#myForm').serialize(),
              success: function () {
              alert('Done');
              }
          });
      });
  });
  &lt;/script&gt;
  &lt;form id="myForm" action="" method="post"&gt;
      &lt;span id="surveyQuestion"&gt;Question 2&lt;/span&gt;&lt;br/&gt;
      &lt;input type="hidden" name="secondQuestion" value="Question 2"&gt;
      &lt;span class="info"&gt;0&lt;/span&gt;
      &lt;input type="radio" class="radioButton" name="response" value="0"&gt;
      &lt;input type="radio" class="radioButton" name="response" value="1"&gt;
      &lt;input type="radio" class="radioButton" name="response" value="2"&gt;
      &lt;input type="radio" class="radioButton" name="response" value="3"&gt;
      &lt;input type="radio" class="radioButton" name="response" value="4"&gt;
      &lt;input type="radio" class="radioButton" name="response" value="5"&gt;
      &lt;span class="info"&gt;5&lt;/span&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that when I do this the <code>submit</code> feature inside the newly loaded div doesn't work any more. I don't get the confirmation in the form of "done" alert box.</p>
  
  <p>I read about the <code>.on()</code> function, but I think it's a bit over my head right now???</p>
  
  <p>I also must ask: is this even a sensible idea or can I hold the questions in another place altogether and call them one after the other in some other way? Because right now I would need to load a question3.php after the second etc...</p>