title: refresh table in page when hitting the save button without refreshing the whole page
body: <p>i have the following code where the user enters the data and once he clicks on the save button, the table shown is reloaded where the new record if inserted into database is displayed.the table reads the data from the database. and im using ajax to load the data and save the record. here is my html code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Contact Info&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
   &lt;script src='jquery1.js'&gt;&lt;/script&gt;
   &lt;script src='jqueryTest.js'&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h2&gt;Contact Information&lt;/h2&gt;
  &lt;p&gt;&lt;span class="error"&gt;* required field&lt;/span&gt;&lt;/p&gt;
  Name:&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type="text" id="name" &gt;
  &lt;span class="error"&gt;* &lt;/span&gt;
  &lt;br&gt;&lt;br&gt;
  Email:&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type="text" id="email" &gt;
  &lt;span class="error"&gt;* &lt;/span&gt;
  &lt;br&gt;&lt;br&gt;
  Telephone:&amp;nbsp;&lt;input type="text" id="telephone" &gt;
  &lt;span class="error"&gt;* &lt;/span&gt;
  &lt;br&gt;&lt;br&gt;
  UserName: &lt;input type="text" id="username"&gt;
  &lt;span class="error"&gt;*&lt;/span&gt;
  &lt;br&gt;&lt;br&gt;
  Password:&amp;nbsp;&amp;nbsp;&lt;input type="password" id="password"&gt;
  &lt;span class="error"&gt;*&lt;/span&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;input type="button" id="save" value="save" &gt;
  &lt;div id="validate"&gt;&lt;/div&gt;
  &lt;?php 
   //connect to the database
    $user=$_POST["user"];
    $pass=$_POST["pass"];
    $host=$_POST["host"];
    $connector = mysql_connect($host,$user,$pass)
        or die("Unable to connect");
    $selected = mysql_select_db("mysql", $connector)
      or die("Unable to connect");
  
    //execute the SQL query and return records
    $result = mysql_query("SELECT * FROM users ");
    ?&gt;
  &lt;table border="2" style= "background-color: #99ffcc; color: #761a9b; margin: 0 auto;"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Email&lt;/th&gt;
          &lt;th&gt;Telephone&lt;/th&gt;
          &lt;th&gt;Username&lt;/th&gt;
          &lt;th&gt;Password&lt;/th&gt;
        &lt;tbody&gt;
          &lt;?php
            while( $row = mysql_fetch_assoc( $result ) )
            {
             echo "&lt;tr&gt;
                   &lt;td&gt;{$row['name']}&lt;/td&gt;
                   &lt;td&gt;{$row['email']}&lt;/td&gt;
                   &lt;td&gt;{$row['telephone']}&lt;/td&gt;
                   &lt;td&gt;{$row['username']}&lt;/td&gt;
                   &lt;td&gt;{$row['password']}&lt;/td&gt;
                   &lt;/tr&gt;\n";
             }
          ?&gt;
       &lt;/tbody&gt;    
     &lt;/tr&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>
  </p>
  
  <p>this is my javascript code:</p>
  
  <pre><code>$(document).ready(function(){
  //save button listener  
  $("#save").click(function(){
  //receiving data entered by user from design.php        
       var name = $('#name').val();
       var email = $('#email').val();
       var telephone = $('#telephone').val();
       var username = $('#username').val();
       var password = $('#password').val(); 
  
  $.ajax({
     type:'POST',
     url: 'contactData.php',             
     data:{"name":name,"telephone":telephone,"email":email, "username":username,   "password":password},
    // dataType:'json',
     success: function(data) {
         var result = JSON.parse(data);
         $("#validate").html(result.msg);   
                             }        
    });//end of ajax
       });//end of listener
          });//end of javascript
  </code></pre>
  
  <p>and my php code is as follows:</p>
  
  <pre><code>&lt;?php 
  
  //connect to the database
    $con=mysql_connect("localhost","root","");
    mysql_select_db("mysql",$con) or die(mysql_error());
  
   $notTaken=false;//variable to check if the username is taken or not
   $username=$_POST["username"];
  
  //to check if username is available in the database
  $query = "SELECT username FROM users"; 
  $result = mysql_query($query) or die(mysql_error());
  //to check if it is the first record  
  $result2 = mysql_query("SELECT * FROM users", $con);
   $num_rows = mysql_num_rows($result2);
  
     if($num_rows==0)
     {
      //if there are still no records don't do anything for now, once out of the if will go to   validty()
    }
      else{
  while($row = mysql_fetch_array($result))
     {
      if( $username == $row['username'])
        {
           $takenMsg='{"msg":"Username Taken"}' ;
           echo $takenMsg;
           $exitMSG='{"msg":"Try Another Username"}';
           exit($exitMSG);
         }
      else{
           $notTaken=true;
           }
      }
    }
  // after checking if the usernname exists or not check for field valdation
  validity();
  
  
  //check for valididty
  function validity(){
  //variables obtained by ajax
  $name=$_POST["name"];
  $telephone=$_POST["telephone"];
  $email=$_POST["email"];
  $username=$_POST["username"];
  $password=$_POST["password"];
  //check if phone is all digits
  $pattern_phone = "|^[0-9\+][0-9\s+\-]*$|i";
  //check if email is in the right form(example@example.com)
  $pattern_email="/([\w\-]+\@[\w\-]+\.[\w\-]+)/";
  
  
  //validate if fields are empty
  if (($name == "") || ($email == "") || ($telephone == "") || ($username == "") || ($password == "")) 
  {
      $errorMsg = '{"msg":"some input is missing"}';
      echo $errorMsg;      
   } 
    //validate if email is in the right form     
    elseif (!preg_match($pattern_email, $email)) 
     {
      $errorMsg = '{"msg":"email format is incorrect"}';
         echo $errorMsg;     
     } 
     //validtae if the telephone is all digits    
     elseif (!preg_match($pattern_phone, $telephone))
     {
     $errorMsg = '{"msg":"telephone should be all digits"}';
     echo $errorMsg;      
     }
   //if all fields aquire the correct validation, insert record to database
  
     else
    {
      $query1=mysql_query("INSERT INTO users(name,telephone,email,username,password)  values('$name','$telephone','$email','$username','$password') ");
     //if record inserted successfully display msg indicating so
     if($query1)
      {
         $msg='{"msg":"Your info has been sent"}';
         echo $msg;
      }
  //if record not inserted sucessfully display msg indicating so       
    else
      {
         $msg='{"msg":"Error in sending your info"}';
         echo $msg;
      }
  }
  }//end of function validity()
  </code></pre>
  
  <p>when pressing the save button if all fields are correct its saving in the database but the record is not shown at the end of the table so i want when clicking the save and the record is saved in the database the table should be reloaded and the new record will be shown as well</p>