title: Php / Jquery Forms & Datatables
body: <p>Hopefully someone can help. I have a customers database table which I am trying to display on a page using jquery datatables. That page will also contain a form to which I can input data and this will update the database and display on the table below. I have 3 files which I am using. Here is the code:</p>
  
  <p>index.php</p>
  
  <pre><code>    &lt;html&gt; 
      &lt;head&gt; 
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" language="javascript" src="jquery.dataTables.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" charset="utf-8"&gt;
              /* Table initialisation */
              $(document).ready(function() {
                  $('#datatable').dataTable( {
                      "sDom": "&lt;'row'&lt;'span8'l&gt;&lt;'span8'f&gt;r&gt;t&lt;'row'&lt;'span8'i&gt;&lt;'span8'p&gt;&gt;"
                  });
              });
      &lt;/script&gt;
      &lt;script type="text/javascript" language="javascript" src="jquery.form.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt; 
          // prepare the form when the DOM is ready 
              $(document).ready(function() { 
              // bind form using ajaxForm 
              $('#htmlForm').ajaxForm({ 
                  // target identifies the element(s) to update with the server response 
                  target: '#datatable', 
                  resetForm: 'true',
  
                  // success identifies the function to invoke when the server response 
                  // has been received; here we apply a fade-in effect to the new content 
                  success: function() { 
                      $('#datatable').fadeIn('slow'); 
                  } 
              });
          }); 
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
          &lt;form id="htmlForm" action="customers.php" method="post"&gt;
                  First:  &lt;input type="text" name="first" /&gt;&lt;br/&gt;
                  Last:   &lt;input type="text" name="last" /&gt;&lt;br/&gt;
                  Phone:  &lt;input type="text" name="phone" /&gt;&lt;br/&gt;
                  Mobile: &lt;input type="text" name="mobile" /&gt;&lt;br/&gt;
                  Fax:    &lt;input type="text" name="fax" /&gt;&lt;br/&gt;
                  Email:  &lt;input type="text" name="email" /&gt;&lt;br/&gt;
                  Web:    &lt;input type="text" name="web" /&gt;&lt;br/&gt;&lt;br/&gt;
              &lt;input id="btnReload" value="Add Customer" type="submit"&gt; 
          &lt;/form&gt;
          &lt;br /&gt;
  
  &lt;!---------------------
  &lt;-- CUSTOMER TABLE ----
  -----------------------&gt;
  
      &lt;?php
      //MySQL Database Connect
       include 'customers.php';
      ?&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>customers.php</p>
  
  <pre><code>    &lt;?php
  
      //MySQL Database Connect
      include 'config.php';
  
      $_POST['first'] = "undefine"; 
      $_POST['last'] = "undefine"; 
      $_POST['phone'] = "undefine"; 
      $_POST['mobile'] = "undefine"; 
      $_POST['fax'] = "undefine"; 
      $_POST['email'] = "undefine"; 
      $_POST['web'] = "undefine"; 
  
      $sql="INSERT INTO contacts (first, last, phone, mobile, fax, email, web)
      VALUES
      ('$_POST[first]','$_POST[last]','$_POST[phone]','$_POST[mobile]','$_POST[fax]','$_POST[email]','$_POST[web]')";
  
          if (!mysql_query($sql,$db))
              {
                  die('Error: ' . mysql_error());
              }
  
              $query="SELECT * FROM contacts";
              $result=mysql_query($query);
  
  
  ?&gt;
  &lt;h2&gt;Customers Table&lt;/h2&gt;
  &lt;?php
  
      $query="SELECT * FROM contacts";
      $result=mysql_query($query);
  
  ?&gt;
  
      &lt;table cellpadding="0" cellspacing="0" border="0" class="bordered-table zebra-striped" id="datatable"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;First&lt;/th&gt;
                  &lt;th&gt;Last&lt;/th&gt;
                  &lt;th&gt;Phone&lt;/th&gt;
                  &lt;th&gt;Mobile&lt;/th&gt;
                  &lt;th&gt;Fax&lt;/th&gt;
                  &lt;th&gt;Email&lt;/th&gt;
                  &lt;th&gt;Web&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  
      &lt;?php   
      $num=mysql_numrows($result);
  
      $i=0;
      while ($i &lt; $num) {
  
          $first=mysql_result($result,$i,"first");
          $last=mysql_result($result,$i,"last");
          $phone=mysql_result($result,$i,"phone");
          $mobile=mysql_result($result,$i,"mobile");
          $fax=mysql_result($result,$i,"fax");
          $email=mysql_result($result,$i,"email");
          $web=mysql_result($result,$i,"web");
  
          ?&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;?php echo $first ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $last ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $phone ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $mobile ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $fax ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $email ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $web ?&gt;&lt;/td&gt;
                  &lt;/tr&gt;
  
      &lt;?php
      $i++;
      }
  
  ?&gt;
  </code></pre>
  
  <p>config.php</p>
  
  <pre><code>    &lt;?php
  $mysql_hostname = "localhost";
  $mysql_user = "root";
  $mysql_password = "";
  $mysql_database = "address";
  $prefix = "";
  $db = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
  mysql_select_db($mysql_database, $db) or die("Could not select database");
  ?&gt;
  </code></pre>
  
  <p>It's working reasonably well at the moment the form is updating the table when I input data but everytime I reload the page a blank record gets inserted into the database. Could someone please advise on the best solution to this problem. </p>