How to post a form to PHP using Ajax .serialize() data?

Question

I am using WordPress and cannot figure what to do with the serialized data from Ajax after it is sent over. I have read on this site that parse_str is what I need, but I am unsure how to make use of it.

Here is the jQuery for the Form Submit

jQuery( document ).ready( function( $ ) { 
    $( '#log_data' ).submit( function( event ) { 
        event.preventDefault(); 
        console.log( $( this ).serialize() );

        var data = $(this).serialize();
        action = 'my_submit_log_action';
        $.post( 
            ajaxurl, 
            data,
            function ( response ) { 
                if ( ! response.success ) { 
                    alert( 'Failure!' ); 
                } 
                alert( 'Success!' );                          
            } 
        ); 
    }); 
});

Because this is in WordPress, I have to pass an action so WordPress knows what function to pass this data to. I am not sure if I am passing the action right (see above).

The second part is the PHP, which is what I do not understand. How do I take the serialized data and post it to the database?

add_action('wp_ajax_my_submit_log_action', 'my_submit_log_action');
add_action('wp_ajax_nopriv_my_submit_log_action', 'my_submit_log_action');
function my_submit_log_action() {
    global $wpdb;

    $user_id = $_POST['user_id'];
    $length = $_POST['length'];
    $ground = $_POST['ground'];
    $date = $_POST['date'];
    $notes = $_POST['notes'];

    $wpdb->insert('wp_jo_plugin_options', array (
        'user_id' => $user_id,
        'length'  => $length,
        'ground'  => $ground,
        'date'    => $date,
        'notes'    => $notes,
    ) );

    die();
}

You are sending $.post (ajax post) to ajaxurl which is not defined (i guess it should be connected with action but it's not and it must be url), and you are not using 'action' variable anyway. So problem is in your jQuery, maybe learn something more about $.post http://api.jquery.com/jQuery.post/ — Choinek, Oct 22 '13 at 07:32
ajaxurl is defined as my wordpress ajax - this is how ajax is called in wordpress. — Greg L, Oct 22 '13 at 08:21

score 5 · Accepted Answer · answered Oct 22 '13 at 08:29

Serialise form data after submission into

<input type="hidden" value="<?php echo base64_encode(serialize($_POST)); ?>" name="posted" />

then in ajax send this data via POST. OR you can use this --------

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  console.log( $( this ).serialize() ); //serialize form on client side
  var pdata = {
     action: "ajaxFunction",
     postdata: $(this).serialize()
  }
  $.post( "<?php echo admin_url('admin-ajax.php'); ?>", pdata, function( data ) {
       $( ".result" ).html( data );
  });
});

check end of these linked pages http://wordpress.org/support/topic/plugin-ajax-call-to-wp-ajaxphp-in-admin-page-returning-0 ----- http://api.jquery.com/jQuery.post/ — Ali Exalter, Oct 22 '13 at 08:31

score 4 · Answer 2 · edited May 23 '17 at 11:46

There are many issues with your code: security, script enqueueing and localization, front-end connection, data encoding, response handling. Try to adapt it to the following examples : [ 1 ] and [ 2 ].

But, to make your sample code work (in the backend only, unless you hardcode the ajaxurl):

var data = {
    values: $(this).serializeArray(), // <--- Important
    action: 'my_submit_log_action'
}

maheshwaghmare · Answer 3 · 2015-04-02T06:59:58.430

Try serialize() or unserialize()

WordPress has a few helper functions that we use instead of serialize() and unserialize() — maybe_serialize() and maybe_unserialize().

E.g.

// 'serialize' the data
update_option( '_option_data', serialize( array( 'foo', bar' ) ) );

// 'unserialize' the data
unserialize( get_option( '_option_data' ) );

https://codex.wordpress.org/Function_Reference/maybe_unserialize

Convert and store data in serialized as below:

add_action('wp_ajax_my_submit_log_action', 'my_submit_log_action');
add_action('wp_ajax_nopriv_my_submit_log_action', 'my_submit_log_action');
function my_submit_log_action() {
    global $wpdb;

    // DEFINE AN ARRAY
    $optionArray = [];

    $user_id = $_POST['user_id'];
    $length = $_POST['length'];
    $ground = $_POST['ground'];
    $date = $_POST['date'];

    // PASS TO ARRAY
    if(isset($user_id) && !empty($user_id){
         $optionArray['user_id'] = $user_id; 
    }
    if(isset($length ) && !empty($length ){
         $optionArray['length'] = $length;
    }
    if(isset($ground ) && !empty($ground ){
         $optionArray['ground'] = $ground;
    }
    if(isset($date ) && !empty($date ){
         $optionArray['date'] = $date;
    }

    // OUTPUT AS SERIALIZED - BOTH ARE SAME
    // echo 'maybe_serialize: '. maybe_serialize( $optionArray );
    // echo 'serialize: '. serialize( $optionArray );

    // INSERT IN DATABASE - HERE USED maybe_serialize()
    $wpdb->insert('wp_jo_plugin_options', maybe_serialize( $optionArray ) );

    die();
}

score 0 · Answer 4 · answered Oct 22 '13 at 08:00

The .serialize() method creates a text string in standard URL-encoded notation.

It can act on a jQuery object that has selected individual form controls, such as <input>, <textarea>, and <select>.

$user_id = $_POST['user_id'];
//Make sure here user_id will be the name attribute of your text field

How to post a form to PHP using Ajax .serialize() data?

4 Answers4