title: Replace div contents with content from PHP file
body: <p>This is the php file containing the  new content, to replace .hotels when the form is submitted.</p>
  
  <pre><code>    &lt;?php
       if(isset($_POST['submit'])){
          $pdo = new PDO('mysql:host=localhost;dbname=CSV_DB', 'root', 'root');
  
          $inputType = $_POST['type'];
          $inputCategory = $_POST['category'];
          $type = $pdo-&gt;query("SELECT * FROM Hotels WHERE Type LIKE '%$inputType%' AND Price_Range= '$inputCategory'");
          foreach($type as $row){
              echo"&lt;div id='newHotels'&gt;";
              echo "&lt;div class='hotelImage'&gt;&lt;/div&gt;";
              echo'&lt;h4&gt;'.$row['Hotel_Name']." ".$row['Rating']."*".'&lt;/h4&gt;'." ".'&lt;p&gt;'.$row['Description'].'&lt;/p&gt;'." "."Location: ".$row['Location']." ".'&lt;h4 style="font-weight: bold"&gt;'."£".$row['Price']."p/p".'&lt;/h4&gt;';
              echo "&lt;/div&gt;";}
          }
  
      ?&gt;
  </code></pre>
  
  <p>Here is the original div that displays all the hotels in the database when the page loads and that I want to replace with the new content when the form is submitted:</p>
  
  <pre><code>    &lt;div id="hotels"&gt;
      &lt;?php
          $pdo = new PDO('mysql:host=localhost;dbname=CSV_DB', 'root', 'root');
          $display = $pdo-&gt;query('SELECT Hotel_Name, Description, Location, Rating, Price FROM Hotels');
        foreach ($display as $row){
          if($row)
              echo"&lt;div id='hotel'&gt;";
              echo "&lt;div class='hotelImage'&gt;&lt;/div&gt;";
              echo'&lt;h4&gt;'.$row['Hotel_Name']." ".$row['Rating']."*".'&lt;/h4&gt;'." ".'&lt;p&gt;'.$row['Description'].'&lt;/p&gt;'." "."Location: ".$row['Location']." ".'&lt;h4 style="font-weight: bold"&gt;'."£".$row['Price']."p/p".'&lt;/h4&gt;';
              echo "&lt;/div&gt;";}
  
      ?&gt;
  
     &lt;/div&gt;
  </code></pre>
  
  <p>And here is the Ajax that is supposed to change the content</p>
  
  <pre><code>        $(function () {
              $('form').on('submit', function (e) {
              e.preventDefault();
  
              $.ajax({
                 type: 'post',
                 url: 'form.php',
                 data: $('form').serialize(),
                 success: function(data) {
                     $(".hotels").html(data);
                     }
                 });
  
             });
  
         });
  </code></pre>
  
  <p>I need help replacing the contents of <code>.hotels</code> with the search results of my form when the form submits however the <code>div</code> just becomes empty. I think I need to make data equal to the search results but not sure how to go about it.</p>