title: PHP how to form submit using ajax
body: <p>I am trying a simple ajax request that does not need to refresh the page upon submit. But I think I did it the wrong way. Any help would be much appreciated.</p>
  
  <p><strong>HTML/JS PAGE</strong></p>
  
  <pre><code>&lt;script&gt;
      $(function () {
          $('form#person').on('submit', function(e) {
              $.ajax({
                  type: 'post',
                  url: 'addAPerson.php',
                  data: $(this).serialize(),
                  success: function (o) {
                            =====&gt;    console.log(o); &lt;=== I TRIED DOING THIS BUT NOTHING IS PRINTED
                      alert('MUST ALERT TO DETERMINE SUCCESS PAGE');
                  }
              });
              e.preventDefault();
          });
      });     
  &lt;/script&gt;
  
  &lt;form id="person" action="addAPerson.php" method="post"&gt;
    Firstname: &lt;input name="fname" /&gt;
    Lastname: &lt;input name="lname" /&gt;
    &lt;input type="reset" style="float:right"name="cancel" value="cancel"/&gt;
    &lt;input type="submit" name="submit" value="save"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>addAPerson.php</strong></p>
  
  <pre><code>&lt;?php
    $fname = $_POST['fname'];
    $lname =$_POST['lname'];
    $con = mysql_connect("localhost","root","");
    mysql_select_db("person",$con);
    $sql = "INSERT INTO person(firstname, lastname) VALUES('$fname', '$lname')";
  
    mysql_close();
  ?&gt;
  </code></pre>