PHP + jQuery + Ajax view - return results on the same page

Question

I would like to have the following:

The user submits the form with a click ( index.php ), the input of the form is processed by an external PHP file ( search.php ), and the results are published on the original page ( index.php ) in a div.

I have already compiled most of the code. It submits the form on click and submits it to a PHP script.

Now I need the result of the PHP script to return to the original page ( index.php ).

Here is my code:

 function submit() { $(function() { var id = "id"; var dataString = 'id=' + id; $.ajax({ type: "POST", url: "inc/search.php", data: dataString, success: function() { goToByScroll("result"); $('#result').html("<br><br><br><br><br><br><br><br><br><br>< div class='center'><img src='img/loader.gif' /></div>").hide().fadeIn(2500, function() { $('#result').html("Finished"); }); } }); return false; }); } 

My PHP file (for testing):

 <?php function safe($value) { htmlentities($value, ENT_QUOTES, 'utf-8'); return $value; } if (isset($_POST['id'])) { $id = safe($_POST['id']); echo ($id); } elseif (!isset($_POST['id'])) { header('Location: error?id=notfound'); } ?> 

I would like to get results from search.php (in this case "id") sent to #result, but I can’t understand how: S

Answer 1

I think you have almost everything. The callback function that you have in success needs an argument that denotes the results from search.php

  success: function(res) { goToByScroll("result"); $('#result').html("<br><br><br><br><br><br><br><br><br><br><div class='center'><img src='img/loader.gif' /></div>").hide().fadeIn(2500, function() { $('#result').html(res + "<br /><br /> Finished"); }); } 

res prints all search.php . Echo, stuff outside php tags, etc. All that you will see if you downloaded search.php .

I don't know if you want Done to still be there. Take it if you do not.

Answer 2

Add a parameter to your success function, for example:

 success: function(param) { ... } 

The parameter is a string that is ALL the output from your server side script. You can set it the way you want and place it inside any element

 $("#element").html(param);