How to use the .serialize() method to send form values to PHP via an AJAX request

Question

I'm using the .serialize() method to serialise my form's values and send them to my PHP script in an AJAX request.

My form:

<form name="myform" action="" method="post" class="form">
    <input type="text" name="one" value="" />
    <input type="text" name="two" value="" />
    <input type="text" name="three" value="" />
    <input type="submit" name="submit" value="Submit" />
</form>

My AJAX request:

$( '.form' ).on( 'submit', function( e ) {

$.ajax({
    type: 'POST',
    url: ajax_url,
    dataType: 'json',
    data: {
        'action': $action,
        'querystr': $( this ).serialize()
    }...

In my PHP script, I expected to be able to do something like this $one = $_REQUEST['one'] but when I do that the value of $one is null .

Why doesn't $_REQUEST['one'] contain the value of my form's input field?

Answer 1

On php end

$params = array();
parse_str($_POST['querystr'], $params);
echo $params['one'];

Answer 2

It's all in your ajax call. In the 'data' property , you declare the post fields that are sent to PHP. So in your code:

$.ajax({
type: 'POST',
url: ajax_url,
dataType: 'json',
data: {
    'action': $action,
    'querystr': $( this ).serialize()
}

You declare

 $_POST['action']

, and

 $_POST['querystr'].

Thats why $_POST['one'] is null - because it's not sent/defined etc.