Question

Ok somehow im having the hardest time figuring this out so i want to do an call ajax with a form and im using jquery to serialize it with .serialize(). The data being sent to php looks something like this

key1=value&key2=value2&key3=value3

And im using a post request. It looks simple enough, but somehow im having a really hard time figuring out how to access these key/value pairs, i cant use explode() on & because that will give me

[0] => key1=value1
[1] => key2=value2
[2] => key3=value3

and i cant use $_POST[‘key1’] or $_GET[‘key1’] in php to access these values. What should i do!!! Thanks

And as a side question i notice .serilize() replaces line breaks with %0A and white spaces with +, how do i decode these values with php? Thanks again!

Edit:

Hey well the jquery code is fairly basic its :

var formSubmit = $(this).serialize();
$.post('ajax.php',{"formSubmit": "true", "formInfo": formSubmit}

Answer 1

If you’re submitting the form data with jQuery’s Ajax functionality, there should not be a problem with using .serialize(). The server should see and urldecode automatically the POST content.

As a demonstration, see this code:

HTML

<form id="category-dynamic" class="dynamic">
   <fieldset id="inner-fieldset">
      <legend id="new-category">
        <label for="category-name">Category Name: </label>
        <input type="text" name="category-name" value="" />
      </legend>
      <ul id="category-fields">
         <li>
           <label>Field #1:</label><br />
           <input type="text" name="fields[]" value="" />
         </li>
         <li>
           <label>Field #2:</label><br />
           <input type="text" name="fields[]" value="" />
         </li>
      </ul>
   </fieldset>
</form>
<h3>POST Result</h3>
<pre></pre>

jQuery

$(document).ready(function(){
    $('pre').html($('#category-dynamic').serialize());

    $.post("http://jfcoder.com/test/processor.php", $('#category-dynamic').serialize(), function(data){
         $('pre').html($('pre').html()+"\n\n"+data);
    });
});

EDIT

And the processor.php file contents:

<?php
print_r($_POST);
?>

EDIT 2

I think your error is that you’re sending the content in such a way as to make the form data be a text string instead of url-encoded content.

For instance, you could do this:

var formSubmit = $(this).serialize() + "&formSubmit=true";
$.post('ajax.php', formSubmit);

And you’d have the same effect, and the server would be able to expand your POST variables without incident.

EDIT 3

See this example:

Where the code is:

$(document).ready(function(){
    var serial = $('#category-dynamic').serialize() + "&formSubmit=true";
    $('pre').html(serial);
    $.post("http://jfcoder.com/test/processor.php", serial, function(data){
         $('pre').html($('pre').html()+"\n\n"+data);
    });
});

Note the addition of the "&formSubmit=true" to the serial data. This outputs from the PHP page:

POST Result

category-name=&fields%5B%5D=&fields%5B%5D=&formSubmit=true

Array
(
    [category-name] => 
    [fields] => Array
        (
            [0] => 
            [1] => 
        )

    [formSubmit] => true
)

EDIT 4

This uses the method you describe. See the difference?

$(document).ready(function(){
    var serial = $('#category-dynamic').serialize();
    $('pre').html(serial);
    $.post("http://jfcoder.com/test/processor.php", {"formSubmit":"true","serial":serial}, function(data){
         $('pre').html($('pre').html()+"\n\n"+data);
    });
});

OUTPUT

POST Result

category-name=&fields%5B%5D=&fields%5B%5D=

Array
(
    [formSubmit] => true
    [serial] => category-name=&fields%5B%5D=&fields%5B%5D=
)