JQuery .load() or .ajax() or .post() for form data to php function

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);
        });
  });
});

Answer 2

In your javascript file you can use the post method or you can use ajax like in the example below to send your data:

$.ajax({
    type : 'post',
    url : 'currentphpfile.php',
    //Here is where the data is put
    data : {
        "ajax" : "1",
        "otherData" : "abc"
    },
    success : function(data, textStatus, jqXHR) {
        //Do something with the data here like insert it into the document
    },
    error : function(XMLHttpRequest, textStatus, errorThrown) {
        //Do something to fix the error
    },
    dataType : 'text' //Or automatically parse a json response with 'json'
});

For this to work, you would need something in your php file that could handle the request like this:

if (!empty($_POST['ajax']) && $_POST['ajax']==1){
    //Do stuff with the other post data
    //Here's how to return the data to your script:
    //If you chose a text response above:
    echo $importantData;
    exit;
    //If you chose json
    echo json_encode(array("title" => $title, "text" => $text /*, etc... */));
}

I haven't tested this code for bugs, but you probably get the idea.