Php does not echo the data from a jQuery Ajax submit

Question

I am fiddling with jQuery.ajax() and php, and I need some pointers in order to make everything work:

Here is the php code:

if(!empty($_POST["fname"])){
        $firstName = $_POST["fname"];
        echo $firstName."<br />";
    }
    if(!empty($_POST["id"])){
        $age = $_POST["id"];
        echo $age;
    }

Here is the jQuery code:

jQuery("#ajaxForm").submit(function(event){
    event.preventDefault();

    var firstName = jQuery("#firstName").val();
    var age = jQuery("#age").val();

    // jQuery.ajax() - Perform an asynchronous HTTP (Ajax) request.
    jQuery.ajax({
        type: "POST",
        url: "http://localhost/profiling/index.php",
        data: {fname:firstName, id:age}
    }).done(function(result){
        alert("Your data has been submitted!" + firstName);
    });
    var result;
    console.log(result);

});

The values from jQuery exist, I get the alert, telling me the data has been submitted, firebug shows the Ajax post as working.

Why doesn't php gets my data and echo it?

because you're not doing it. Recieve date from that php and append it in some div — Mercurial
– Mercurial, Commented May 8, 2013 at 23:22
I have added the console.log(result), update my question - result is undefined — webmasters
– webmasters, Commented May 8, 2013 at 23:23
It's undefined because you declared it again before you logged it. See my answer below. — chuckieDub
– chuckieDub, Commented May 8, 2013 at 23:29

Loolooii · Accepted Answer · 2013-05-08 23:57:25Z

1

You need to get the returned data by the php and do something with it. See the added line of code below.

jQuery("#ajaxForm").submit(function(event){
event.preventDefault();

    var firstName = jQuery("#firstName").val();
    var age = jQuery("#age").val();

    // jQuery.ajax() - Perform an asynchronous HTTP (Ajax) request.
    jQuery.ajax({
        type: "POST",
        url: "http://localhost/profiling/index.php",
        data: {fname:firstName, id:age}
    }).done(function(result){
        alert("Your data has been submitted!" + firstName);
        alert("This is the data returned by the php script: " + result)
    });

});

edited May 8, 2013 at 23:57

Loolooii

9,26814 gold badges71 silver badges92 bronze badges

answered May 8, 2013 at 23:25

chuckieDub

1,8479 gold badges30 silver badges47 bronze badges

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

4 Comments

webmasters Over a year ago

Ty! Weird, the result - alerts me and gives me the whole content of the page.

webmasters Over a year ago

I may not understand the ajax very well, shouldn't the echo $_POST["fname"] work after the ajax submit?

chuckieDub Over a year ago

What else is contained in the php script?

chuckieDub Over a year ago

Yep, so, just write a very short script that returns just fname if that's all you want.

Community · Accepted Answer · 2017-05-23 10:25:13Z

0

You have to use the success callback function to process the response from the POST to your Php page.

As stated in this thread

Your code could look similar to the following:

  /* Send the data using post and put the results in a div */
$.ajax({
  url: "test.php",
  type: "post",
  data: values,
  success: function(returnval){
      alert("success");
       $("#result").html('submitted successfully:' + returnval);
  },
  error:function(){
      alert("failure");
      $("#result").html('there is error while submit');
  }   
});

So, you have to somehow append the response from your Php to an HTML element like a DIV using jQuery

Hope this helps you

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered May 8, 2013 at 23:23

juanreyesv

8539 silver badges22 bronze badges

7 Comments

webmasters Over a year ago

$_POST["fname"] - I should be able to echo this after the Ajax submit

Mercurial Over a year ago

additionaly, add a datatype. Html or json.

juanreyesv Over a year ago

@webmasters Yes, your Php is fine, you are able to echo the $_POST["fname"] variable, but then how does the HTML knows that it has to show that value? That is when jQuery comes to action by displaying the Php echoed value somewhere in your page. Does that makes any sense?

webmasters Over a year ago

I see, that makes sense, cause I'm not refreshing the page... but how do I do that?

chuckieDub Over a year ago

@juanreyesv that script doesn't do anything with the returned data.

|

T.Todua · Accepted Answer · 2014-10-23 20:33:03Z

0

The correct way:

<?php
$change = array('key1' => $var1, 'key2' => $var2, 'key3' => $var3);
echo json_encode(change);
?>

Then the jquery script:

<script>
$.get("location.php", function(data){
var duce = jQuery.parseJSON(data);
var art1 = duce.key1;
var art2 = duce.key2;
var art3 = duce.key3;
});
</script>

answered Oct 23, 2014 at 20:33

T.Todua

57.1k22 gold badges261 silver badges266 bronze badges

Collectives™ on Stack Overflow

Php does not echo the data from a jQuery Ajax submit

3 Answers 3

4 Comments

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related