title: Retrieving data from PHP as HTML using AJAX
body: <p>Basically I want to add form fields to existing form after making an entry in database.</p>
  
  <p>form:</p>
  
  <pre><code>&lt;div class="row"&gt;
              &lt;div class="col-md-8 col-md-offset-2"&gt;
              &lt;form id="insert_question" method="post" action=""&gt;
  
             &lt;div class="field_wrapper"&gt; //Append Data in this
              ...
                  &lt;input type="hidden" name="id[]" id="text1" value="&lt;?php echo $data['id']; ?&gt;"&gt;
              ...             
              //Insert data here
              &lt;/div&gt;
              &lt;/form&gt;                            
              ...
     &lt;button class="btn btn-info btn-block btn-fill add_button"&gt;Add More Questions&lt;/button&gt; 
  //this button I am using to add
      &lt;/div&gt;
  </code></pre>
  
  <p>Ajax :</p>
  
  <pre><code>$('.add_button').click(function() {
      var val1 = $('#text1').val();
      $.ajax({
          type: 'POST',
          url: 'add_question.php',
          data: { text1: val1 },
          dataType: 'html',
          success: function(response) {
              $('#field_wrapper').append(response);
          }
      });
  });
  </code></pre>
  
  <p>add_question.php:</p>
  
  <pre><code>    &lt;?php 
  
  $servername = "localhost";
  $username = "root";
  $password = "";
  $dbname = "coursera";
  
  // Create connection
  $conn = new mysqli($servername, $username, $password, $dbname);
  // Check connection
  if ($conn-&gt;connect_error) {
      die("Connection failed: " . $conn-&gt;connect_error);
  } 
  
  
          $section_id = $_POST['text1'];
  
         $sql = "INSERT INTO quiz VALUES (DEFAULT, 'question','option1','option2','option3','option4','answer','$section_id','$course_id','$instructor_id',DEFAULT)"; 
          if ($conn-&gt;query($sql) === TRUE) {
              echo '&lt;div class="form-group"&gt;&lt;label&gt;Question &lt;?php echo $m; ?&gt;&lt;/label&gt;&lt;textarea class="form-control" placeholder="Enter your question here.." name="question[]" required=""&gt;&lt;?php if($data["question"] != "question") { echo $data["question"];} ?&gt;&lt;/textarea&gt;&lt;/div&gt;&lt;div class="form-group"&gt;&lt;label&gt;Option 1&lt;/label&gt;&lt;textarea class="form-control" placeholder="Answer Option 1" name="option1[]" required=""&gt;&lt;?php if($data["question"] != "question") { echo $data["option1"];} ?&gt;&lt;/textarea&gt;&lt;/div&gt;&lt;div class="form-group"&gt;&lt;label&gt;Option 2&lt;/label&gt;&lt;textarea class="form-control" placeholder="Answer Option 2" name="option2[]" required=""&gt;&lt;?php if($data["question"] != "question") { echo $data["option2"];} ?&gt;&lt;/textarea&gt;&lt;/div&gt;&lt;div class="form-group"&gt;&lt;label&gt;Option 3&lt;/label&gt;&lt;textarea class="form-control" placeholder="Answer Option 3" name="option3[]" required=""&gt;&lt;?php if($data["question"] != "question") { echo $data["option3"];} ?&gt;&lt;/textarea&gt;&lt;/div&gt;&lt;div class="form-group"&gt;&lt;label&gt;Option 4&lt;/label&gt;&lt;textarea class="form-control" placeholder="Answer Option 4" name="option4[]" required=""&gt;&lt;?php if($data["question"] != "question") { echo $data["option4"];} ?&gt;&lt;/textarea&gt;&lt;/div&gt;&lt;div class="form-group"&gt;&lt;label&gt;Correct Answer&lt;/label&gt;&lt;select class="form-control" name="answer[]" required=""&gt;&lt;option value="Option 1"&gt;Option 1&lt;/option&gt;&lt;option value="Option 2"&gt;Option 2&lt;/option&gt;&lt;option value="Option 3"&gt;Option 3&lt;/option&gt;&lt;option value="Option 4"&gt;Option 4&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;br&gt;&lt;hr style="border: 1px solid #000;"&gt;&lt;br&gt;&lt;input type="hidden" name="id[]" value="&lt;?php echo $data["id"]; ?&gt;"&gt;';
          } 
  
  
      ?&gt;
  </code></pre>
  
  <p><strong>I am not able to add the html that I echo after running the query from php. I want to do it with ajax so I don't have to refresh the page.</strong></p>
  
  <p>Thanks.</p>