Ajax send the data, but php doesn't recieve

Question

Although I'm still reading Nicholas C. Zakas' book (read over 300 pages within 4 days), in the meantime I got a little project to create a half-automatized documentation generator page for our later big project. It's half-done, but now I want to give more features to it which requires that I need to send the values of textareas to PHP, so PHP can update the mysql and vica versa, but that's not the matter now.

The problem: Ajax succeed, I get the success message, but PHP doesn't read the POST. Why?

I made my research, I read tones of stackoverflow topics and other websites, phpmanual, w3school examples, but something is going wrong.

Basic html example:

<form id="foo">
   <label for="bar">A bar</label>
   <input id="bar" name="bar" type="text" value="" />
   <input type="submit" value="Send" />
</form>

<div id="result"></div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="script.js"></script>

The basic ajax call(send) I found for this:

/* Attach a submit handler to the form */
$("#foo").submit(function(event) {

    /* Stop form from submitting normally */
    event.preventDefault();

    /* Clear result div*/
    $("#result").html('');

    /* Get some values from elements on the page: */
    var values = $("#foo").serialize();
    console.log("val: "+values);

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

Simple PHP for test if I get that data or not

<?php

   if(isset($_POST['bar']))
   {
       echo "hello " . $_POST['bar'];
   };

?>

All three files are in the same folder.

I'm surely will learn about this topic more and deeper later on, just now I need to finish this small project as soon as possible. I'm going to be front-end developer, so the php part won't wait for me, but now I need it for testing until I can speak with the server-side programmer. I want to be sure which variables and data I'll send to him, so he can handle them later.

Thanks in advance!

Answer 1

How do you know your script isn't receiving the data?

change success to the following:

success: function(data){
        $("#result").html('Submitted successfully:' + data);
    },

All you are doing is saying 'if a response is received without an error update a div' - you have no way of knowing if your php script has run SUCCESSFULLY (it has run as you are getting success) or not at the moment.

with the 'data' in the function you can then see if information has been passed back by your script.

Try the above and let us know how you get on

FOR CLARITY

PHP scripts when you access them are run ONCE - they have no memory (other than fixed variables such as $cheese = "yummy";

The reason you cannot see a response when you access the page (even after running your script) is that it is a bit stupid and doesn't remember you ran it.

So accessing the script directly the script is going

'Oh - it's show time, right.....err.....ok - has the person sent me 'bar' - nope well in that case I will not do what is inside the if statement - end of my job - nothing to do here I will send nothing back.'

Try this:

change $_POST['bar'] to $_GET['bar'];

Then go to your URL where the script is and type http://yoururl.com/script.php?bar=terrence

You will notice you now get a response because you passed the script what it wanted to return true and so do what is inside the if statement.

For data to persist you need to store to a database or a text file.

Hope that is clear!

Answer 2

If you're on windows, get Fiddler. It's a free packet sniffer from Microsoft. It will allow you to see what is in between. You will be able to see what the socket sees coming from the browser and what the socket receives from the server.

http://msdn.microsoft.com/en-us/library/bb250446%28v=vs.85%29.aspx#ie_introfiddler_topic2

It may be a little overkill for what you are doing, but I think it's always good to have great tools for debugging. It buys you options, and opens possibilities.

There are others out there too. And I'm sure there are nix tools available as well.

Answer 3

I think everything is correct except you dint pass any value from you form.Just replace this code

<form id="foo">
   <label for="bar">A bar</label>
   <input id="bar" name="bar" type="text" value="something" />
   <input type="submit" value="Send" />
</form>

I think it will solve your problem.And add change this small code in js

Form

success: function(){
    $("#result").html('Submitted successfully');
},

TO

success: function(result){
    $("#result").html('Submitted successfully'+result);
},