Question

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.

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.

Start Form PHP (checkin_start.php): Enter a barcode and submit…

<div class="content" id="bodyContent">
  <form id="usualValidate" class="mainForm" method="post" action="">
    <label>Barcode:<span>*</span></label>
    <input type="text" class="required" name="startBarcode" id="startBarcode"/>
    <input type="submit" value="submit" class="blueBtn" id="startBtn" />
  </form>
</div>

Process PHP (checkin_process.php): a new form and the query results from the php function are loaded into id=”bodyContent”…

<form id="checkinProcess" class="mainForm" method="post" action="">
  <label>Barcode:<span>*</span></label>
  <input type="text" class="required" name="processBarocdes" id="processBarcodes"/>
  <input type="submit" value="submit" class="blueBtn" id="submitBtn" />
</form>
<!-- Shipment List Table -->
<?php
  // Accept a parameter from #usualValidate form and run query.                 
  $barcode = $_POST['startbarcode'];    
  search_shipped_barcode($barcode);                         
?>

Functions PHP (functions.php): returns results table…

<?php 
function search_shipped_barcode($barcode){
<--! DB connection & query -->  
  echo "<table>";
    <--! echo table results -->
  echo "</table>";
}
?>

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…

$(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");
  });
});

Thanks for any insight….

Answer 1

When you use $.post, the values should not be quoted unless they are literals.

Try this:

$(document).ready(function() {
  $("#usualValidate").submit(function(sevt) {
    sevt.preventDefault();
    var startBC = $("#startBarcode").val();
    $.post("checkin_process.php",
          {startBarcode : startBC},
          function(data) {
            $("#bodyContent").html(data);
           // log the returned data to console for debug 
           console.log(data);
        });
  });
});