title: Ajax cannot load data from php to div
body: <p>This is the ajax function</p>
  
  <pre><code>$(document).ready(function() {
          $('#submit').click(function(e) {
              e.preventDefault();
              $.ajax({
                  type: 'POST',
                  url: 'searchphp.php',
                  data: {suburb_id: $('#suburb_id').val()},
                  success: function(data)
                  {
                      $("#tableContent").html(data);
                  }
              });
          });
      });   
  </code></pre>
  
  <p>this is the php file need to receive data, it worked perfect.</p>
  
  <pre><code>&lt;?php
  //Check the form if submit by post
      if (isset($_POST["searchBtn"])) {
          $strInputSuburb = "";
  
  
          $strInputSuburb = $_POST["suburb_id"];
  
  
          //Check if the input box is empty or not
          //if BOTH "Suburb" AND "Street" is empty, it will display the error message.
          if(!empty($strInputSuburb))
          {
              //Connect to database server and table
              include("connection.php");
              @mysqli_select_db($conn, "db")
              or die ("Database not available");
  
              $querySql1 = "select * from Infringement 
                            where suburb like '%".mysqli_real_escape_string($conn, $strInputSuburb)."%' and Street1 like '%".mysqli_real_escape_string($conn, $strInputStreet)."%'
                            order by Suburb, Fines DESC";
  
              $result1 = mysqli_query($conn, $querySql1)
                  or die ("No information return...");
  
              $count = mysqli_num_rows($result1);
              $i=1;
              if(!$count==0){
                  //do stuff, like echo
              }
              else {
                  //do stuff
              } 
  
              //Release the SQL clause
              mysqli_free_result($result1);
              //Close the connection to database
              mysqli_close($conn);
          }
          else {
          //do stuff
          }
      }   
  ?&gt;         
  </code></pre>
  
  <p>i want load to this div</p>
  
  <pre><code>&lt;div id="tableContent"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>the css style is </p>
  
  <pre><code>#tableContent {
  
              width:100%;
              height:400px;
  
  
  
          }
  </code></pre>
  
  <p>The input box is below</p>
  
  <pre><code>&lt;input type="textbox" class="form-control" name="suburb" placeholder="Suburb" id="suburb_id" &gt;
  &lt;input type="submit"class="btn" name="searchBtn" id='submit' value="Search" /&gt;
  </code></pre>
  
  <p>I used  php to get data from form before. after using Ajax, I  deleted "form" tag. </p>
  
  <p>Thank you so much.</p>