I seem to be having a strange issue with jQuery and a newly-created AJAX form/function. I'm pretty new to AJAX so please bear with me. Here's the jQuery:

jQuery('#wpuf_new_post_form').submit(function(e) {

    e.preventDefault();

    var data2 = jQuery('#wpuf_new_post_form').serialize();

    var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';

    jQuery.ajax({
        type: 'POST',
        url: ajaxurl,
        data: data2 + '&action=savedata',
        success: function(resp) {
            if(!resp){ alert ('Failed!')}else{ alert(data2) }
        }
    });

});

The above code takes the submission of my #wpuf_new_post_form form, serializes the data, then passes it through to my PHP function:

add_action('wp_ajax_nopriv_savedata', 'my_ajax_save_form');
add_action('wp_ajax_savedata', 'my_ajax_save_form');

function my_ajax_save_form(){

    $my_post = array(
        'post_title'    => $_POST['wpuf_post_title'],
        'post_content'  => $_POST['wpuf_post_content'],
        'post_type'     => $_POST['wpuf_post_type'],
        'post_status'   => 'publish',
    );

    wp_insert_post($my_post);

    $this_post_ID = wp_insert_post($my_post);

    add_post_meta($this_post_ID, 'cf_user-timestamp',  $_POST['cf_user-timestamp']);
    add_post_meta($this_post_ID, 'cf_project-id',  $_POST['cf_project-id']);
    add_post_meta($this_post_ID, 'cf_bin-id',  $_POST['cf_bin-id']);
    add_post_meta($this_post_ID, 'cf_status',  $_POST['cf_status']);
    add_post_meta($this_post_ID, 'cf_schedule-date',  $_POST['cf_schedule-date']);
    add_post_meta($this_post_ID, 'cf_reply-url',  $_POST['cf_reply-url']);
    add_post_meta($this_post_ID, 'cf_from-user',  $_POST['cf_from-user']);

}

Creating the post and post meta as shown above, via the AJAX submission, works just fine. The only three fields which refuse to work happen to be select form elements.

They are:

• cf_project-id
• cf_bin-id
• cf_status

Again, all the other post meta submissions as depicted above, hit the database just fine. It's only the select form element values that do not.

Is there possibly a better way to handle the serialized value of select form elements?

PS: If it's of any value, here's an example of the serialized string that's being passed through as the jQuery variable data2. As you can see, the format doesn't differ from any of the other submitted form elements:

_wpnonce=537e4539cc&_wp_http_referer=%2Fajax%2F&wpuf_post_title=1395254005136&wpuf_post_content=Testing&cf_user-timestamp=March+19th+2014%2C+11%3A33%3A25+am&cf_project-id=3797&cf_bin-id=3325&cf_status=-status-today&cf_schedule-date=03%2F21%2F2014&cf_reply-url=&cf_from-user=&wpuf_post_type=post&wpuf_post_new_submit=yes

I seem to be having a strange issue with jQuery and a newly-created AJAX form/function. I'm pretty new to AJAX so please bear with me. Here's the jQuery:

jQuery('#wpuf_new_post_form').submit(function(e) {

    e.preventDefault();

    var data2 = jQuery('#wpuf_new_post_form').serialize();

    var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';

    jQuery.ajax({
        type: 'POST',
        url: ajaxurl,
        data: data2 + '&action=savedata',
        success: function(resp) {
            if(!resp){ alert ('Failed!')}else{ alert(data2) }
        }
    });

});

The above code takes the submission of my #wpuf_new_post_form form, serializes the data, then passes it through to my PHP function:

add_action('wp_ajax_nopriv_savedata', 'my_ajax_save_form');
add_action('wp_ajax_savedata', 'my_ajax_save_form');

function my_ajax_save_form(){

    $my_post = array(
        'post_title'    => $_POST['wpuf_post_title'],
        'post_content'  => $_POST['wpuf_post_content'],
        'post_type'     => $_POST['wpuf_post_type'],
        'post_status'   => 'publish',
    );

    wp_insert_post($my_post);

    $this_post_ID = wp_insert_post($my_post);

    add_post_meta($this_post_ID, 'cf_user-timestamp',  $_POST['cf_user-timestamp']);
    add_post_meta($this_post_ID, 'cf_project-id',  $_POST['cf_project-id']);
    add_post_meta($this_post_ID, 'cf_bin-id',  $_POST['cf_bin-id']);
    add_post_meta($this_post_ID, 'cf_status',  $_POST['cf_status']);
    add_post_meta($this_post_ID, 'cf_schedule-date',  $_POST['cf_schedule-date']);
    add_post_meta($this_post_ID, 'cf_reply-url',  $_POST['cf_reply-url']);
    add_post_meta($this_post_ID, 'cf_from-user',  $_POST['cf_from-user']);

}

Creating the post and post meta as shown above, via the AJAX submission, works just fine. The only three fields which refuse to work happen to be select form elements.

They are:

• cf_project-id
• cf_bin-id
• cf_status

Again, all the other post meta submissions as depicted above, hit the database just fine. It's only the select form element values that do not.

Is there possibly a better way to handle the serialized value of select form elements?

PS: If it's of any value, here's an example of the serialized string that's being passed through as the jQuery variable data2. As you can see, the format doesn't differ from any of the other submitted form elements:

_wpnonce=537e4539cc&_wp_http_referer=%2Fajax%2F&wpuf_post_title=1395254005136&wpuf_post_content=Testing&cf_user-timestamp=March+19th+2014%2C+11%3A33%3A25+am&cf_project-id=3797&cf_bin-id=3325&cf_status=-status-today&cf_schedule-date=03%2F21%2F2014&cf_reply-url=&cf_from-user=&wpuf_post_type=post&wpuf_post_new_submit=yes

• jquery
• ajax
• forms

• Have you examined $_POST content to see if there's something unexpected about it? I usually just send stuff to the server error log to have a look in this sort of context. For example: error_log(var_export($_POST, true)); – KenB Commented Mar 20, 2014 at 23:24
• Can you also post your html form, especially the select elements? – sri Commented Mar 21, 2014 at 9:41

1 Answer 1

instead of this:

jQuery('#wpuf_new_post_form').submit(function(e) {

Try this way, it should work for you.

jQuery(document).on("submit", "#wpuf_new_post_form" , (function(e)) {

    var data2 = jQuery('#wpuf_new_post_form').serialize();

first do console.log(data2)

try it, should print entire form 's data in console.