jQuery form submit (with files) in ajax

Question

There have been hundreds of these question here, but I've searched and searched but I can't find an answer to my problem. My goal is to submit the entire form, including any potential files in it. This is my non-functional code:

$(target + " form.dialog").submit(function(){
    var data = new FormData($(this));
    $.ajax({
        url: $(this).attr("action"),
        type: "post",
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data){
            // Do stuff..
        }
    });
    return false;
});

So, basically, I haven't found jQuery code that use $(this) as an argument to the FormData() class. According to the specification one should be able to submit "form element" to the class, and I'm assuming that $(this) doesn't actually does this. Most examples look like this:

var data = new FormData($('#myform')[0]);

But my implementation deals with any form loaded in a jQuery dialog(), which is HTML loaded from the server via ajax, so I can't know beforehand what ID the form has to target it specifically.

Even if I call it like this:

var data = new FormData($(target + " form.dialog")[0]);

Nothing happens, or rather, no parameters are submitted. Is this a jQuery version problem? The "target" variable is always an ID in the form of "#dialog", do I need to find and retrieve the form element in some other way?

When I do this:

console.log(typeof($(target + " form.dialog")[0]))

returns "object", which I'm assuming is the wrong type for the FormData() class... Any help is appreciated.

adeneo · Accepted Answer · 2013-09-18 07:14:14Z

2

FormData is plain JS, it does not accept a jQuery object but a plain JS form, just use :

var data = new FormData(this);

$.ajax({
    url: $(this).attr("action"),
    type: "post",
    data: data,
    ....
});

answered Sep 18, 2013 at 7:14

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sandman Over a year ago

I would love to be able to tell you that this works, but it doesn't. In fact, I've already tried it. Something is not working for me. typeof(this) also returns "object". But perhaps it should even if it's supposed to be form element?

Sandman Over a year ago

This was a problem with me using an older jquery version, when updating it, it worked as it should. Thanks!

Collectives™ on Stack Overflow

jQuery form submit (with files) in ajax

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related