title: JQuery .load() or .ajax() or .post() for form data to php function
body: <p>Trying to implement AJAX using one of JQuery’s functions. I’ve been trying .load(), .ajax() or .post() in various ways, by using some of the examples on Stack Overflow without success. </p>
  
  <p>I have a form, which queries the oracle DB, and returns another form and a results table. I have it working in the traditional way with separate PHP files (reload an entire new page). Now I want to just load the content without the page refresh. </p>
  
  <p>Start Form PHP (checkin_start.php): Enter a barcode and submit…</p>
  
  <pre><code>&lt;div class="content" id="bodyContent"&gt;
    &lt;form id="usualValidate" class="mainForm" method="post" action=""&gt;
      &lt;label&gt;Barcode:&lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
      &lt;input type="text" class="required" name="startBarcode" id="startBarcode"/&gt;
      &lt;input type="submit" value="submit" class="blueBtn" id="startBtn" /&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Process PHP (checkin_process.php): a new form and the query results from the php function are loaded into id="bodyContent"…</p>
  
  <pre><code>&lt;form id="checkinProcess" class="mainForm" method="post" action=""&gt;
    &lt;label&gt;Barcode:&lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
    &lt;input type="text" class="required" name="processBarocdes" id="processBarcodes"/&gt;
    &lt;input type="submit" value="submit" class="blueBtn" id="submitBtn" /&gt;
  &lt;/form&gt;
  &lt;!-- Shipment List Table --&gt;
  &lt;?php
    // Accept a parameter from #usualValidate form and run query.                 
    $barcode = $_POST['startbarcode'];    
    search_shipped_barcode($barcode);                         
  ?&gt;
  </code></pre>
  
  <p>Functions PHP (functions.php): returns results table…</p>
  
  <pre><code>&lt;?php 
  function search_shipped_barcode($barcode){
  &lt;--! DB connection &amp; query --&gt;  
    echo "&lt;table&gt;";
      &lt;--! echo table results --&gt;
    echo "&lt;/table&gt;";
  }
  ?&gt;
  </code></pre>
  
  <p>I think I probably have the same problem no matter which one I choose, so here's my .post() attempt. I don't quite understand how to pass the form data to my php function and return the data back...</p>
  
  <pre><code>$(document).ready(function() {
    $("#usualValidate").submit(function(sevt) {
      sevt.preventDefault();
      var startBC = $("#startBarcode").val();
      $.post("checkin_process.php",
            {"startBarcode" : "startBC"},
            function(data) {$("#bodyContent").html(data)},
            "html");
    });
  });
  </code></pre>
  
  <p>Thanks for any insight....</p>