Post variables to php file and load result on same page with ajax

Question

I have tried searching quite a bit but can't seem to make anything work.

I am trying to make a form that sends info to a PHP file and displays the output of the PHP file on the same page.

What I have so far:

HTML:

    <html>
      <form id="form">
        <input id="info" type="text" />
        <input id="submit" type="submit" value="Check" />
      </form>
      <div id="result"></div>
    </html>

JS:

<script type="text/javascript">

var info= $('#info').val();
var dataString = "info="+info;

$('#submit').click(function (){
     $.ajax({
        type: "POST",
        url: "/api.php",
        data: dataString,
        success: function(res) {
            $('#result').html(res);
                }

  });

});
</script>

PHP:

<?php

  $url = '/api.php?&info='.$_POST['info']; 

  $reply = file_get_contents($url); 

   echo $reply;

?>

When I set the form action to api.php, I get the result I am looking for. Basically what I want is to see the same thing in the "result" div as I would see when the api.php is loaded.

I cannot get any solutions to work.

Is it because you're in a subfolder? `/api.php` goes to the root, then looks for a file named `api.php`. `api.php` looks for that file in the current directory. — Nic, Apr 21 '15 at 23:56
When I originally posted the question, nothing happened at all, and the page would refresh. I added return false; to the click event as Steve suggested, and I also added echo $url; to the php file so that I could see the URL. My new problem is that the url is "api.php/?info=" instead of being "api.php/?info=(whateverinfosubmitted)" — Harry Sohie, Apr 22 '15 at 00:05
possible duplicate of http://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php — Pedro Lobito, Apr 22 '15 at 00:06

score 1 · Answer 1 · edited Apr 22 '15 at 00:17

1

Your click event is not stopping the actual transaction of the page request to the server. To do so, simply add "return false;" to the end of your click function:

$('#submit').click(function (){
 $.ajax({
    type: "POST",
    url: "/api.php",
    data: dataString,
    success: function(res) {
        $('#result').html(res);
    }
 });

 return false;

});

Additionally, you should update the type="submit" from the submit button to type="button" or (but not both) change .click( to .submit(

edited Apr 22 '15 at 00:17

Pedro Lobito

94,083
31
258
268

answered Apr 21 '15 at 23:49

Steve Hynding

1,799
1
12
22

Thank you very much, that solved part of my problem. I updated the php file to also echo the url, and it looks like the $_POST['info'] is not being submitted, the url that it echos is "/api.php&info=". Should I be using something else in the place of $_POST['info'] in the api url? – Harry Sohie Apr 22 '15 at 00:02

score 0 · Answer 2 · answered Apr 22 '15 at 01:06

Thanks everyone for your help, I have it working now.

I was doing a few things wrong:

I was using single quotes in my php file for the URL and also for the $_POST[''] variables.
I needed to add return false; as Steve pointed out.
I did not have a "name" for the input elements, only an ID.

score 0 · Answer 3 · answered Apr 22 '15 at 01:18

I think Your code evaluate dataString before it is filled with anything. Try to put this into function of $.ajax. The code below.

/* ... */

$('#submit').click(function (){
    $.ajax({
        var info= $('#info').val();
        var dataString = "info="+info;

/* ... */

Post variables to php file and load result on same page with ajax

3 Answers3