Getting form $_POST data from Ajax/Jquery in php

Question

As always thanks in advance if you can help with this one.

I'm trying to use Ajax to call a script and post the form data at the same time. Everything works as expected except the $POST data which comes back blank when I try to echo or print it. Can anyone shine a light on what I have missed here please?

<form id="guestlist" name="guestlist">
<?php // Collect CLUBS data to pass to guestlist script ?> 
<input type="hidden" name="gl_clubname"   value="<?php echo $ptitle; ?>" />
<input type="hidden" name="gl_clubnumber" value="<?php echo $phoneno_meta_value; ?>" />
<input type="hidden" name="gl_clubemail"  value="<?php echo $email_meta_value; ?>" />
<?php // Collect USERS data to pass to guestlist script ?> 
<input type="hidden" name="gl_name"  value="<?php echo $fullname;?>" />
<input type="hidden" name="gl_email"  value="<?php echo $email;?>" />
<input type="hidden" name="gl_dob"  value="<?php echo $birthday;?>" />
<input type="hidden" name="gl_propic"  value="<?php echo $profile_url;?>" />

<div id="clubcontactleft">
<textarea id="clubmessage" name="gl_message" placeholder="Your message" rows="4" style="background-image:url('http://www.xxxxx.com/wp-content/themes/xxxxx/images/userreview.jpg');
 background-repeat:no-repeat; padding-left:40px; background-size:40px 94px; width:250px; margin-bottom:15px;"></textarea>
 <input type="text" name="gl_when" placeholder="Enquiry Date" style="background-image:url('http://www.xxxxx.com/wp-content/themes/xxxxx/images/calendaricon.jpg');
 background-repeat:no-repeat; padding-left:40px; background-size:40px 38px; width:250px;">
<input type="text" name="gl_phonenumber" placeholder="Phone Number" style="background-image:url('http://www.xxxxx.com/wp-content/themes/xxxxx/images/phonecall.jpg');
 background-repeat:no-repeat; padding-left:40px; background-size:40px 38px; width:250px;">
</div>
<div class="guestlistbutton"><a href="#" alt="Send Message" title="Send Message" class="calltoactionbutton">Send Message</a></div>
</form>


<script type="text/javascript">
    $(document).ready(function($){
        $(".guestlistbutton").on('click',function(event) {
            event.preventDefault();
            $("#clubcontactform").empty();
            var url = "http://www.xxxxxx.com/wp-content/themes/xxxxxx/guestlist.php"; // the script where you handle the form input.
            $.ajax({
                type: "POST",
                url: url,
                data: $("#guestlist").serialize(), // serializes the form's elements.
                success: function(data)
                {
                    $('#clubcontactform').append(data); // show response from the php script.
                }
            });
            return false; // avoid to execute the actual submit of the form.
        });
    });
</script>

Here is the php file that it pulls in

<?php
echo 'Pulling in guestlist.php<br/>';
$gl_message = $_POST['gl_message'];
print_r($gl_message);
echo $gl_message;

?>

Thanks!

Answer 1

Every thing seems to be correct only you forget to include the jquery file. please include and try once. If still persist the issue will create the Jsfiddle

Answer 2

I checked your code in my local machine and I got the following error "Caution provisional headers are shown". If you have the same message in your browser console, this information can help you: "CAUTION: provisional headers are shown" in Chrome debugger

Also, I see that js work perfectly. Problem in your url address. Try send your form to itself, just write html part and php part of code in one file.

Answer 3

<div>
<form id="Get_FRm_Data">
/*
Some field using.....
/*
</form>
<button type="button" name="submit" class="submit_act">Submit</button>
</div>
<script>
var file_pathname = window.location.protocol + "//" + location.host + "/foldername/";
$(document).on("click", ".submit_act", function ()
{
    var $this_val=$(this);
    $this_val.html("Loading...").prop("disabled",true);
    var $data_ref = new FormData($("#Get_FRm_Data")[0]);
    $data_ref.append("action", "fileaction_name");
    $pathname = file_pathname + "filename.php";
    $.ajax({
        url: $pathname,
        type: 'POST',
        data: $data_ref,
        cache: false,
        contentType: false,
        processData: false,
        dataType: 'json',
        success: function (result, status)
        {
            console.log(result);
            if (status == "success")
            {
             $this_val.html("Submit").prop("disabled",false);
            }
        }

    });

});
</script>
<?php
if (isset($_POST['action']))
        {
        $action = $_POST['action'];
         if($action=="fileaction_name")
        {
            print_r($_POST);
        }
    }
?>