How to post a form to PHP using Ajax .serialize() data?
Solution 1
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 );
});
});
Solution 2
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'
}
Solution 3
Try serialize()
or unserialize()
- WordPress has a few helper functions that we use instead of
serialize()
andunserialize()
—maybe_serialize()
andmaybe_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();
}
Greg L
Updated on April 02, 2020Comments
-
Greg L about 4 years
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(); }
-
Ali Exalter over 10 yearscheck end of these linked pages wordpress.org/support/topic/… ----- api.jquery.com/jQuery.post