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....

In your example, remove the quotes around "startBC": 'startBarcode': startBC. You're currently passing the string "startBC" instead of the variable's value. — lethal-guitar
– lethal-guitar, Commented Jan 30, 2013 at 21:12

user20232359723568423357842364 · Accepted Answer · 2013-01-31 14:49:41Z

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

edited Jan 31, 2013 at 14:49

answered Jan 30, 2013 at 20:51

user20232359723568423357842364

4,6341 gold badge20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

lethal-guitar Over a year ago

Well, the values should not be - I don't think it's a problem with the keys?

user20232359723568423357842364 Over a year ago

The values should not be quoted if they are variables. In the example, the value for startBC is a variable.

Rolo Tomassi Over a year ago

@user2023235. Thanks, that helped pass the variable, I can see that in firebug now. Now it pointed out my next problem, checkin_process.php is just content, I have no reference to function.php. Adding a require once functions.php to checkin_process.php causes an oci_parse error. Anyone know how to reference that without a header?

Rolo Tomassi Over a year ago

I think I know the problem. I will re-post as new question.

Faisal Qayyum Over a year ago

I have posted a quesiton related to it can you please check?

gearsdigital · Accepted Answer · 2013-01-30 21:08:07Z

0

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.

edited Jan 30, 2013 at 21:08

gearsdigital

14.2k6 gold badges46 silver badges73 bronze badges

answered Jan 30, 2013 at 21:05

CoderOfHonor

7417 silver badges17 bronze badges

1 Comment

Rolo Tomassi Over a year ago

Thanks. Reading up on json to see if that would be a better option.

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related