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!

Have you watched the request / response in the browser's console? Are there any errors? — Jay Blanchard, May 29 '14 at 13:46
Try `echo '$gl_message =
' . htmlspecialchars (print_r ($gl_message, true)) . '
';` . Or try to print_r the entire $_POST. — gregn3, May 29 '14 at 13:51
If I understand well, I think you want to empty the form after the user submits it. Well `$("#clubcontactform").empty();` empties the form before submitting it. Try putting after the AJAX submit. — afaolek, May 29 '14 at 13:52
I just did a test with `if (isset($_POST)){ print_r ($_POST); }` in the php form, but it returns an empty array. Is the problem with the serialization? — bowser404, May 29 '14 at 13:55
Maybe try this in JS: `var mydata = $("#guestlist").serialize(); console.dir (mydata);` It should output the contents of mydata to the JS console. — gregn3, May 29 '14 at 13:58
@afaolek I'm emptying the containing DIV of the form, so that it is not displayed at all, and instead the DIV displays the result echo'd out from the php. — bowser404, May 29 '14 at 13:59
This can be a case of redirect; if the original POST request gets a 301, 302 response, the browser will change the request method into GET. — Antti Haapala -- Слава Україні, May 29 '14 at 14:47
Thanks for that @Antti but that isn't the case. GET returns NULL aswell. I'm a little stumped on this one! — bowser404, May 29 '14 at 15:27
I'm convinced it's the JQUERY not passing the POST to the php, but can't figure out how to fix this one. — bowser404, May 29 '14 at 15:28

score 1 · Answer 1 · answered Jun 03 '14 at 10:50

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

answered Jun 03 '14 at 10:50

Prakashvgr

21
6

score 0 · Answer 2 · edited May 23 '17 at 12:10

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.

score 0 · Answer 3 · answered Mar 24 '17 at 20:43

<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);
        }
    }
?>

Getting form $_POST data from Ajax/Jquery in php

3 Answers3