jQuery and AJAX Not working with Select Form Element

Question

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

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.