Unable to show table after POST on same form PHP jQuery - php

Question

I have this code below that gets the data from the POST and return the data as a table. When the code runs I put Console Log to see what is happening once the SUBMIT button is pressed. When the console log shows as "done" I want to show the table instead, but can't see why it's not happening.
<script type="text/javascript">
$(function(){
$('#searchform').on('submit', function(e){
e.preventDefault();
//alert($('#searchpostcode').val())
$.post('includes/jobdetailssearch.php',
$('#searchform').serialize(),
function(data, status){
$('.table-responsive #displayadd').html(data.Display);
//$("#table-responsive td").last().append(data);
console.log("done");
}).fail(function () {
console.log("fail");
});
});
});
</script>
Why would this be?

Answer 1

Make sure your php script returns a serialized json structure, which can be parsed by javascript.
Try to console.log(data) in your callback function to see what is returned from PHP.

Answer 2

Try This:
<script type="text/javascript">
$(function(){
// Submit Button Pressed
$(document).on('submit','#searchform', function(e){
// Prevent Default Click
e.preventDefault();
//The first parameter of $.post() is the URL we wish to request
$.post("includes/jobdetailssearch.php",
{
//Then we pass in some data to send along with the request
searchval:$('#searchform').val()
},
//The third parameter is a callback function. The first callback parameter holds the content of the page requested, and the second callback parameter holds the status of the request.
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
Note:
$('#searchform').on('submit' work same as $('#searchform').submit( but when you use $(document).on('submit','#searchform' then it will also work for the DOM added later.