Can't retrieve jQuery serialized form data with PHP $_POST[] variable

Question

Using Ajax jQuery function $.post(), I'm sending jQuery serialized() form data to a PHP function which successfully receives it in $_POST[] yet individual $_POST['form_field'] variables are empty.

In my PHP function, print_r($_POST) successfully displays the form data:

Array ( [action] => send_message [data] => modal_name=olivier&modal_email=olivier%40hotmail.com&modal_message=Hello+world )

Yet $_POST['modal_name'], $_POST['modal_email'] and $_POST['modal_message'] are empty. Why?

HTML:

<form id='contact'>
  <input type='text' name='modal_name' id='modal_name' />
  <input type='email' name='modal_email' id='modal_email' />
  <textarea name='modal_message' id='modal_message'></textarea>
</form>

JS:

$('#contact').on('submit', function(e) {
  e.preventDefault();
  if (modal_name && modal_email && modal_message) {
    var data = {
      action: 'send_message',
      data: $(this).serialize()
    };
    $.post(WPaAjax.ajaxurl, data, function(response) {
      $('.modal').append(response);
    });
  }
});

As you can see in `$_POST`, your `data` key contains a serialized string. So you can either parse that or don't serialize twice and send the serialized form directly: `var data = $(this).serialize()`; — jeroen, Mar 06 '17 at 10:54

score 2 · Accepted Answer · edited May 23 '17 at 12:31

use $(this).serializeArray() instead of $(this).serialize()

Reference:- https://api.jquery.com/serializeArray/

The difference between both:-https://stackoverflow.com/a/10430571/4248328

You need to do like below:-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id='contact'>
  <input type='text' name='modal_name' id='modal_name' />
  <input type='email' name='modal_email' id='modal_email' />
  <textarea name='modal_message' id='modal_message'></textarea>
  <input type="submit" value = "submit">
</form>

<script type="text/javascript">
$('#contact').on('submit', function(e) {
  e.preventDefault();
  if (modal_name && modal_email && modal_message) {
     var data = $(this).serializeArray();
     data.push({name: 'action', value: 'send_message'});
     $.post('query.php', data, function(response) {
      $('.modal').append(response);
    });
  }
});
</script>

And in php:-

<?php

if(!empty($_POST)){
    echo "<pre/>";print_r($_POST);
}
?>

It will output like this:-

<pre/>Array
(
    [modal_name] => sdsadsa
    [modal_email] => a@gmail.com
    [modal_message] => sadada
    [action] => send_message
)

Note:- if you want to use serialize()only then do like below:-

<script type="text/javascript">
$('#contact').on('submit', function(e) {
  e.preventDefault();
  if (modal_name && modal_email && modal_message) {
     var data = $(this).serialize()+ '&action=send_message';
     $.post('query.php', data, function(response) {
      $('.modal').append(response);
    });
  }
});
</script>

Looks like the double serializing messed everything up, works now thanks! — drake035, Mar 06 '17 at 12:24

score 0 · Answer 2 · answered Mar 06 '17 at 10:49

0

You should use $_POST['data']['modal_name'], $_POST['data']['modal_email'] and $_POST['data']['modal_message'] instead. Also use $.serializeArray() from jQuery.

The reason is that you send form data as param called data.

answered Mar 06 '17 at 10:49

michail_w

4,318
4
26
43

Using serializeArray() now, $_POST['data']['modal_name'] is empty and $_POST['modal_name'] as well. – drake035 Mar 06 '17 at 11:06

Can't retrieve jQuery serialized form data with PHP $_POST[] variable

2 Answers2

Linked