Form data is empty while posting form through ajax using jquery in WordPress

I am sending a form through ajax using jquery in WordPress but unfortunately i get form empty in console.

Here is my jquery code –

function step1SaveData(){
    var formData = new FormData(jQuery('#tpform1')[1]);
    console.log(formData);
    jQuery.ajax({
        type:"POST",
        url:'http://lexem.in/wp-admin/admin-ajax.php',
        processData:false,
        contentType:false,
        data:{
            action:'tpartners',
            formdata:formData,
        },
        success:function(data){
            var insertedID = data.trim();
            if(insertedID!='fail'){
            }else{
                console.log('fail');
            }
        }

    });

}

And here is my ajax file code –

add_action( 'wp_ajax_tpartners', 'save_update_data' );
add_action( 'wp_ajax_nopriv_tpartners', 'save_update_data' );

function save_update_data(){

    print_r($_POST);
    print_r($_FILES);

} 

Ajax file returns 0.

So please help me to figure it out.

Thanks in advance.

1 Answer
1

Try using .serialize() instead of FormData

 function step1SaveData(){
    var formData = jQuery('#tpform1').serialize();
    console.log(formData);
    jQuery.ajax({
        type:"POST",
        url:'http://lexem.in/wp-admin/admin-ajax.php',
        data:{
            action:'tpartners',
            formdata:formData,
        },
        success:function(data){
            var insertedID = data.trim();
            if(insertedID!='fail'){
            }else{
                console.log('fail');
            }
        }

    });

}

or use .serializeArray() if you want your data in an array instead of a string.

EDIT – from the comments, remove processData:false and contentType:false from the ajax call

Leave a Comment