PHP + jQuery + Ajax form submission - return results on the same page

Question

I would like to have the following:

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

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

What I would need now is that the result from the PHP script are given back to the original page (index.php).

Here is my code so far:

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) is:

<?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 have results from search.php (in this case "id") posted into #result, but I can't figure out how :S

jon_darkstar · Accepted Answer · 2011-04-15 19:53:32Z

7

I think you've got almost everything. The callback function you have under success needs an argument which stands for 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 is everything outputted be search.php. Echo, stuff outside of php tags, etc Anything you'd see if you loaded search.php itself.

I don't know if you wanted 'Finished' to still be there. Take it out if you dont.

answered Apr 15, 2011 at 19:53

jon_darkstar

16.9k7 gold badges35 silver badges38 bronze badges

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

2 Comments

r0skar Over a year ago

This is 100% working :) and the best thing: I have just had to copy and paste it! Thanks a lot!

jon_darkstar Over a year ago

hah i only added about six characters to yours you couldve just typed them. glad it worked out

Jeff Lambert · Accepted Answer · 2011-04-15 19:51:10Z

2

Add a parameter to your success function, e.g.:

success: function(param) { ... }

The param is a string which is ALL of the output of your server side script. You can set that to whatever you want it to be and place it inside some element

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

answered Apr 15, 2011 at 19:51

Jeff Lambert

24.7k4 gold badges72 silver badges98 bronze badges

3 Comments

r0skar Over a year ago

hi watcher, thanks for your quick reply and your time! i have just included my php test script. could you let me know what I have to add in the above example to display my results on index.php?

Jeff Lambert Over a year ago

Whatever you echo in your server side php script will be set to the variable param in the success function. Simply echo out the ID, if its not found just echo("ID Not Found");. Then in the success function do: $("#results").html(param); and that should work.

r0skar Over a year ago

Thanks a lot guys! I was almost at the solution when jon_darkstar came up with a, for me, easier solution! Thanks for ur time!!

Collectives™ on Stack Overflow

PHP + jQuery + Ajax form submission - return results on the same page

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related