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. — anon
– anon, Commented Apr 21, 2015 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
– Harry Sohie, Commented Apr 22, 2015 at 0:05
possible duplicate of stackoverflow.com/questions/5004233/… — Pedro Lobito
– Pedro Lobito, Commented Apr 22, 2015 at 0:06

Pedro Lobito · Accepted Answer · 2015-04-22 00:17:08Z

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, 2015 at 0:17

Pedro Lobito

99.8k36 gold badges274 silver badges278 bronze badges

answered Apr 21, 2015 at 23:49

Steve Hynding

1,8691 gold badge13 silver badges22 bronze badges

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

1 Comment

Harry Sohie Over a year ago

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 · Accepted Answer · 2015-04-22 01:06:15Z

0

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.

answered Apr 22, 2015 at 1:06

Harry Sohie

234 bronze badges

Comments

Michas · Accepted Answer · 2015-04-22 01:18:32Z

0

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;

/* ... */

answered Apr 22, 2015 at 1:18

Michas

9,6366 gold badges41 silver badges64 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related