PHP Post Data with AJAX and DataTables

Question

When submitting forms, I ran across problems in getting POST data in my server-side PHP script. I narrowed it down to a little bit of JQuery/JavaScript that loads JSON data via AJAX into a DataTable.

The form is as follows:

   <form class="form-horizontal" action="./scripts/lookup.php" method="post" role="form" id="lookupForm">
   <div class ="form-group">
      <label for="inputLookup" class="col-sm-2 control-label">Username</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputLookup" name="lookup_name" placeholder="John.Doe" required/>
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-10 col-sm-offset-2">
         <input id="submitUserLookupBtn" name="submitUserLookup" type="submit" value="Lookup" class="btn btn-primary"/>
      </div>
   </div>
</form>

And then the script:

$("#lookupForm").submit(function (e) {
 e.preventDefault();
 $.ajax({
     type: 'POST',
     url: './scripts/lookup.php',
     dataType: 'json',
     success: function(s) {
      LUUTable.fnClearTable();
        for(var i = 0; i < s.length; i++) {
           LUUTable.fnAddData([
              s[i][0],
              s[i][1],
              s[i][2],
              s[i][3],
              s[i][4],
              s[i][5],
              s[i][6],
              s[i][7]
           ]);
        }
     },
     error: function(e) {
        if (e.responseText != '') {
           console.log("Error: " + e.responseText);
        } else {
           console.log("Warning: No data to return.");
        }
     }
 });
});

Whenever that code snippet is run, the PHP does not get POST data, however once I comment the script out, POST data is sent to the server. The problem, however, is that this code snippet is where I handle the JSON data returned by the server.

What could be the reason for this causing data not to POST, and how might I either further troubleshoot or mitigate this issue?

Much appreciated!

It is before the AJAX call currently. I had at the bottom to see if it would change the behavior. — signus
– signus, Commented Mar 25, 2015 at 21:37
You do not pass any data through in your post request, you need to add a 'data' attribute to the $.ajax call i.e data: $(this).find('#inputLookup').val() — rogy
– rogy, Commented Mar 25, 2015 at 21:44
Doh, right you are! However I issue it as data: {input_lookup : $(this).find('#inputLookup').val()}. Feel free to submit as an answer, thanks! — signus
– signus, Commented Mar 25, 2015 at 21:54

Manmeet S. Oberoi · Accepted Answer · 2015-03-25 21:57:19Z

2

You are sending the data twice to the ./script/lookup.php

<form class="form-horizontal" action="./scripts/lookup.php" method="post" role="form" id="lookupForm">

and in the Ajax script. Change the above line to

<form class="form-horizontal" role="form" id="lookupForm">

Just keep the url, and type: post in the ajax call in the javascript.

answered Mar 25, 2015 at 21:57

Manmeet S. Oberoi

1,1221 gold badge17 silver badges29 bronze badges

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

2 Comments

Jay Blanchard Over a year ago

Where is the OP sending the data to the PHP script? There is no data property in the OP's AJAX.

signus Over a year ago

This actually appears to be the primary problem. If I define like I did in the comments of {name : value} it works when I keep the values the way they currently are, but in order to serialize, I need to remove the action and method from the form. Thanks!

Jay Blanchard · Accepted Answer · 2015-03-25 21:58:18Z

0

Serialize your form data and send the values in your AJAX:

$("#lookupForm").submit(function (e) {
 e.preventDefault();
 var formValues = $(this).serialize(); // serialize the form data
 $.ajax({
     type: 'POST',
     url: './scripts/lookup.php',
     data: formValues, // send serailized form data here
     dataType: 'json',

answered Mar 25, 2015 at 21:58

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

Collectives™ on Stack Overflow

PHP Post Data with AJAX and DataTables

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related