Parse a jquery serialize string in PHP

Question

Before people jump all over me, I've seen this thread: How do I PHP-unserialize a jQuery-serialized form?

My question is very similar, yet my data is much different. I'm using a AJAX call to do the post, the data posts just fine (jQuery is 1.7). The form & AJAX are dynamically loaded in when a user clicks a few links and drills down to this form & ajax script.

The AJAX looks like: (BTW, I know you're supposed to us .on() but I can't seem to get that to work like I can .live() )

$('#ajaxCaptionForm').live('submit', function(e){
    e.preventDefault(); 
    $.ajax({
        'type':'POST',
        'data':{formData: $('#ajaxCaptionForm').serialize()},
        'success':function(){
            parent.$.fancybox.close();
        }
    });   
}); // closing form submit 

The form looks like:

<form method="Post" action="localhost/controller" id="ajaxCaptionForm" name="ajaxCaptionForm">
    <label for="Caption">Caption</label><input type="text" id="Caption" name="Caption" value="Leaf lesions.">
    <label for="Keywords">Keywords</label>
    <p>Please seperate keywords by a comma
    <input type="text" id="Keywords" name="Keywords" value=""></p>
    <input type="hidden" id="imageID" name="imageID" value="87595">
    <input type="submit" value="Update Image" name="yt3" clicked="true">
</form>

The serialized data looks like: (according to firebug)

formData=Caption%3DFruit%2Blesions.%26Keywords%3D%26imageID%3D87592

When I echo out a response, I get this:

"Caption=Leaf+symptoms+of+++CCDV.&Keywords=&imageID=87655"

My problems are:

1. The keywords field is empty, even when I put in content
2. The caption field doesn't change on post when I change content.

3. How do i access each of the variables? Caption, Keywords and Images. $_POST does not work nor:

   Yii::app()->request->getParam('imageID')

Answer 1

It appears that you're making the serialized form data (which should already be URL-encoded key=values), as the value in a JSON key-value pair. Is this what you intend to do?

From http://api.jquery.com/serialize/, note that the form data once sent through .serialize() "is a text string in standard URL-encoded notation."

From http://api.jquery.com/jQuery.ajax/, note that the data setting "is converted to a query string, if not already a string."

So, you're taking a text string in "standard URL-encoded notation", and then making it the value in a key-value JSON pair in data setting.

I think your could should be something like this instead (ignore the live() v. on() issue):

$('#ajaxCaptionForm').live('submit', function(e){
    e.preventDefault(); 
        $.ajax({
            'type':'POST',
            'data':$('#ajaxCaptionForm').serialize(),
            'success':function(){
                parent.$.fancybox.close();
            }
        });   
    }); // closing form submit 

This would also be why you can't access anything as you're expecting, as it's all being passed under the 'formData' key. You can do a print_r($_POST) to verify this, or echo Yii::app()->request->getQueryString(); both should print out all the data you've submitted as a PHP array, showing you the keys and values.

As a suggestion, this is a perfect example of when to use the Firebug console to see exactly what params are being submitted.