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

Question

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.

site_url() is PHP, this is in the Javascript code if I'm reading the question right — mrben522
– mrben522, Commented Jul 19, 2017 at 12:30
We'll need to see your HTML to diagnose this, if your console.log is returning null then you've got a mistake in how you're grabbing the form data. May I ask why you're using FormData instead of .serialize()? — mrben522
– mrben522, Commented Jul 19, 2017 at 12:34
@mrben522 actually i have to post image also that's why i am using FormData() function. — Vipin
– Vipin, Commented Jul 19, 2017 at 12:36

fuxia · Accepted Answer · 2018-10-06 18:03:51Z

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

edited Oct 6, 2018 at 18:03

fuxia♦

107k39 gold badges256 silver badges467 bronze badges

answered Jul 19, 2017 at 12:37

mrben522

1,7131 gold badge12 silver badges17 bronze badges

I have used .serialize() function but unfortunately it does not post file data.

Vipin
– Vipin

2017-07-19 12:39:49 +00:00
Commented Jul 19, 2017 at 12:39
Okay i use serializeArray() function now and let's see what happens.... update you asap.

Vipin
– Vipin

2017-07-19 12:40:47 +00:00
Commented Jul 19, 2017 at 12:40
i have data in console now by using serializeArray() function but POST is still empty, unfortunately.

Vipin
– Vipin

2017-07-19 12:48:39 +00:00
Commented Jul 19, 2017 at 12:48
So, finally problem is resolved by following steps - 1. Remove processData:false from ajax request 2. Remove contentType:false from ajax request 3. Use serializeArray() function instead of FormData(). Thanks for your assistance. Cheers

Vipin
– Vipin

2017-07-19 12:58:54 +00:00
Commented Jul 19, 2017 at 12:58
@Vipin can you please edit this answer or post your own answer with your result? I did not understand how to replace formdata by serializeArray.

Basti
– Basti

2017-10-08 18:06:41 +00:00
Commented Oct 8, 2017 at 18:06

| Show 1 more comment

Stack Exchange Network

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

1 Answer 1

Your Answer

Hot Network Questions

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

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions