$.post not sending data to php script

Question

Okay I am at a loss for what is going wrong. I am trying to pass the form data to my php script from a simple jQuery script but for some reason when I try to access $_POST data php says that $_POST is empty?

Here we go, so I have the following jQuery and php scripts

jQuery

var post = $('#cform').serialize();
console.log("POST DATA: " + post);
$.post(action, post, function(data){
    document.getElementById('message').innerHTML = data;
    $('#message').slideDown('slow');
    $('#cform img.contact-loader').fadeOut('slow',function(){$(this).remove()});
    $('#submit').removeAttr('disabled');
    if(data.match('success') != null) $('#cform').slideUp('slow');
 });

PHP

$fname  = $_POST['fname'];
$lname  = $_POST['lname'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$comments = $_POST['comments'];

The console log of var post looks like this

POST DATA: fname=Daniel&lname=Jarvis&email=test%40gmail.com&phone=4444444444&comments=hello

And the var_dump of $_POST says this

array(0) { }

I have no clue why this is giving me so many problems so any help would be greatly appreciated.

P.S I have also tried simply doing this for the post data but it still was not working.

var post = {fname: $('#fname').val(), lname: $('lname').val(), ...} //you get the idea

The console.log looked like this

{fname: "Dan", lname: "Jarvis", ...}

But when I var_dumped the $_POST variable it still said

array(0) { }

Look into the $.ajax() syntax. Its much more intuitive than the $.post() syntax in my opinion. — developerwjk
check $_SERVER['REQUEST_METHOD']. if that's not saying post, then your ajax post got redirected somewhere else. — Marc B
Watch the request / response in the browser's console. You will see if the request contains the payload and any data returned by the response. — Jay Blanchard
I looked at the $_SERVER['REQUEST_METHOD'] and it says string(3) "GET"? Any ideas what that means or why it is saying GET and not POST? @MarcB — Danwakeem
something cause your post to get redirected, which turned it into a get. you'll have to dig around for rewrites or other server-side shenanigans. — Marc B

Neel Ion Neel Ion · Accepted Answer · 2015-08-07T08:26:43

*There are several issues in your code,

1.Add event which will trigger ajax.

2.Your php script does not echo any data.

3.No return false or prevent defaul to stop form submission manually.(I think this is the main issue)

check the solution:*

HTML:

    <form id="form">

    <input type="text" name="fname">
    <input type="text" name="lname">
    <input type="text" name="email">
    <input type="text" name="phone">
    <input type="text" name="comments">
    <input type="submit" name="submit" value="submit">

    </form>

    <span id="message"></span>

Javascript:

    $("#form").submit(function(){

        var post = $('#form').serialize();
        console.log("POST DATA: " + post);
        $.post('target.php', post, function(data){
        document.getElementById('message').innerHTML = data;
        $('#message').slideDown('slow');
        $('#cform img.contact-loader').fadeOut('slow',function(){$(this).remove()});
        $('#submit').removeAttr('disabled');
        if(data.match('success') != null) $('#cform').slideUp('slow');

     });
    return false;
    })

PHP(I assume that your php script is target.php):

  $fname  = $_POST['fname'];
  $lname  = $_POST['lname'];
  $email = $_POST['email'];
  $phone = $_POST['phone'];
  $comments = $_POST['comments']; 

  echo $fname.$lname.$email.$phone.$comments;

$.post not sending data to php script

1 Answers