CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
Sandman
Sandman

Reputation: 2379

jQuery form submit (with files) in ajax

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.

Upvotes: 1

Views: 4299

Answers (1)

adeneo
adeneo

Reputation: 318352

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,
    ....
});

Upvotes: 2

Related Questions