0

I have a jquery function that takes form values, serializes them and passes them to a php function in a Wordpress plugin. When I try to retrieve the post values, I can only retrieve the entire string, not each value. Here is my current jquery function:

jQuery('.lesson_complete').change(function () {
    if (jQuery(this).is(":checked")) {
        //var module = jQuery(this).parent().find('.module-id').val();
        //alert(module);
        var progress_post = jQuery(this).parent().serialize();
        
        jQuery.ajax({
            type: "POST",
            url: submitprogress.ajaxurl,
            data: {
                action: 'submit_progress',
                data: progress_post
            },
            success: function (response) {
                //alert(form_parent);
                //alert('success');
                alert(progress_post);
                alert("working" + response);
                //jQuery("#feedback").html(data);
            }
        });
        
        return false;
    }    
})
<form type="post" action="#" id="moduleProgressForm">
    <label for="lesson_complete">Finished with this lesson?</label>
    <input type="checkbox" class="lesson_complete" value="1" name="lesson_complete" />
    <input type="hidden" name="user_id" value="'.get_current_user_id().'"/>
    <input type="hidden" name="post_id" value="'.$current_post.'"/>
    <input type="hidden" class="module-id" name="module_id" value=""/>
</form>

I can access the string using this in the function:

$post_values = $_POST['data']

It returns this string:

lesson_complete=1&user_id=2&post_id=1&module_id=1

But I can't access individual post values. What am I doing wrong?

Eric Aya
  • 69,473
  • 35
  • 181
  • 253
Brad C.
  • 3
  • 1

2 Answers2

0

If you wish to pass an Object to be able to access values through a key-value pairing you must serialize and convert the object properly.

var temp_post = jQuery(this).parent().serialize();
var progress_post = JSON.Stringify(temp_post);

This will create a JSON Object. Ensure that your backend PHP method accepts a JSON Object, instead of just a string, and you will be able to acces the properties of the Object via regular OOP notation.

  • Thanks Daniel. This seems to have broke the jquery function. Even after hiding the Ajax call and just trying to return the value of progress_post in an alert, I get nothing. I feel like I'm missing something. Shouldn't the PHP function view the serialized string as a post and pull each post variable? – Brad C. Aug 01 '15 at 17:53
  • 1
    @BradC. If you send a JSON string with an XMLHttpRequest, to access it in PHP you will need to use the contents of `php://input`. This question might have some details: http://stackoverflow.com/questions/18371751/reading-json-input-in-php – John Weisz Aug 01 '15 at 18:25
0

jQuery will convert the object literal you supplied into the data setting to a query string (and will do so recursively). This means, an object of

var progress_post = {
    lesson_complete: 1,
    user_id: 2,
    post_id: 1,
    module_id: 1
}

will become

lesson_complete=1&user_id=2&post_id=1&module_id=1

which is exactly the string you received. The reason for this is that in this case you are uploading data as plain text. But note the structure of the string you received. They all seem to be key value pairs, no?

lesson_complete=1&
user_id=2&
post_id=1&
module_id=1

All glued together by & characters. Parse_str to the rescue:

parse_str($_POST['data'], $post_values);

parse_str will convert such a query string to an associative array (or individual variables, if the second argument is omitted), after which you may access its elements as expected:

echo $post_values['user_id']; // 2
John Weisz
  • 30,137
  • 13
  • 89
  • 132
  • 1
    Mr. John White, a thousand thank you's. The other answers may have been correct but this seemed the easiest solution for my problem and worked beautifully. Thank you so much. – Brad C. Aug 01 '15 at 18:53