title: How to make multiple AJAX queries after user input?
body: <p>This seems like such a simple thing, but I have not been able to find adequate guidance on it for the life of me. I have only been able to find things about successive AJAX queries regardless of user input, <a href="https://stackoverflow.com/questions/6986458/how-can-i-make-batches-of-ajax-requests-in-jquery">like this</a> or <a href="https://stackoverflow.com/questions/27032636/how-to-make-multiple-ajax-calls">this</a>.</p>
  
  <p>What I'm trying to do is create a survey such that after a user answers a question, the website replaces the question with the next question, and so on. </p>
  
  <p>Here's what I have so far (in a .php file): </p>
  
  <p>In <code>&lt;head&gt;</code>, I have a function for each successive element to call:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function nextPage(url) {
          $("#consent-form").empty();
          $("#consent-form").load(url);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Maybe that's just not how it's done. I have no idea. Like I said, I have not been able to find adequate help on this. As far as I can tell, empty() should not delete #consent-form, but only its content and children, which is exactly the behavior I want.</p>
  
  <p>This is the initial html and php for the div I want to swap out after each answered question: </p>
  
  <pre><code>&lt;div id="consent-form"&gt;
  
     &lt;?php
  
          // Check for a valid email address.
          $email = $emailErr = "";
  
          if ($_SERVER["REQUEST_METHOD"] == "POST") {
              if (empty($_POST["email"])) {
                  $emailErr = "* Your email address is required.";
              } else {
                  $email = test_input($_POST["email"]);
                  if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
                      $emailErr = "* Please enter a valid email address.";
                  } else {
                      $actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
                      $query = "INSERT INTO survey VALUES ('" . $email . "','" . $actual_link . "','','')";
                      mysql_query($query);
                      echo '&lt;script type="text/javascript"&gt;'
                          , 'nextPage("survey.php");'
                          , '&lt;/script&gt;'
                          ;
                      }
                  }
              }
  
          function test_input($data) {
              $data = trim($data);
              $data = stripslashes($data);
              $data = htmlspecialchars($data);
              return $data;
          }
       ?&gt;
       &lt;p&gt;
       [Consent form text]
       &lt;/p&gt;
       &lt;form method="post" action="&lt;?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?&gt;"&gt;
       Please enter your email address: &lt;input type="text" name="email" value="&lt;?php echo $email;?&gt;"&gt;
       &lt;span class="error"&gt; &lt;?php echo $emailErr;?&gt;&lt;/span&gt;
       &lt;br&gt;
       &lt;input type="submit" value="Begin Study"&gt;
       &lt;/form&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>As I'm sure you can tell, I'm trying to do some form validation there. </p>
  
  <p>This succcessfully injects the content of the next page ("survey.php") into the consent-form div. "survey.php" includes the following, using the nextPage() function shown above: </p>
  
  <pre><code>$("#csp_form").on('submit', function() {
      nextPage("other.php");
  });
  </code></pre>
  
  <p>But this fails to inject the consent-form div with "other.php". </p>
  
  <p><s>Now, however, not even the form validation works. According to Firebug, the jquery library has raised some sort of error, even when I comment out all the jquery and javascript functions, and it's stuck in some perpetual loading operation.</s> (This issue has been fixed.)</p>
  
  <p>I am about to start throwing things. I have tried many different other techniques, but none of them worked and I have lost track of them. Hopefully this latest version will be sufficient to get guidance on this. </p>
  
  <p>Sorry all that was so long, but usually people complain that there's too little information, so I wanted to make sure to include everything. </p>
  
  <p>EDIT: </p>
  
  <p>Per request, here's the current full content of survey.php (with the text content changed for privacy purposes): </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $("#icecream_form").on('submit', function() {
          nextPage("other.php");
          return false;
      });
  &lt;/script&gt;
  
  &lt;br&gt;
  &lt;h2&gt;What's your favorite ice cream flavor?&lt;/h2&gt;
  &lt;form method="post" id="icecream_form"&gt;
      &lt;input type="radio" name="icecream" value="vanilla"&gt; Vanilla
      &lt;br&gt;
      &lt;input type="radio" name="icecream" value="chocolate"&gt; Chocolate
      &lt;br&gt;
      &lt;input type="radio" name="icecream" value="other"&gt; Something else
      &lt;br&gt;
      &lt;input type="radio" name="icecream" value="none" checked&gt; I don't have a favorite.
      &lt;br&gt;
      &lt;br&gt;
      &lt;input type="submit" name="icecream_submit" value="Go" onsubmit="return(false)"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>After hitting submit, the content from consent-form comes back with an error message from the email form ("Please enter an email address"), implying that the email form was posted again. I cannot comprehend how that is possible if all the stuff from that div had truly been replaced by the stuff in survey.php. </p>