Can't build a FormData object out of existing form

Question

I'm trying to build a FormData object out of a form on my page. I'm getting the form element like this:

var form = document.forms['upload_form'];

And then I'm building the FormData object like this:

var fd = new FormData(form);

Since you cannot log values in a FormData object (as described here), I'm sending the formdata to '/' just so I can see its contents in my Network Inspector. The contents of the request payload are simply:

------WebKitFormBoundaryKAgAjii8IMLyJFcB--

and nothing else! If I manually append a value to the form like this:

fd.append("username", "Groucho");

it works:

------WebKitFormBoundaryZikgEBo7sTzvlndC
Content-Disposition: form-data; name="username"

Groucho

I've also tried selecting the form element in other ways, such as with jQuery:

var form = $(".upload_form");
var fd = new FormData(form[0]);

No matter how I select the form element, the form variable certainly does have the form in it (it's not null or empty), but constructing the FormData object with it as a parameter just does not seem to work. Can anyone help?

PS I'm using Chrome 31.0.1650.57. I've also tried this in Safari 7.0 with the same results.

Another thing: The inputs in this form are nested inside a number of divs. Could this be a problem?

Are you constructing your _FormData_ after the form exists **and** has been filled in? Does the form actually submit anything if you do it in _pure HTML_? — Paul S., Nov 17 '13 at 22:57
Yes, I am constructing the FormData after the form exists and has been filled in. The form does not submit anything in pure HTML, since this is a JavaScript-only web app, and I only wish to submit the form with AJAX. Therefore, the form does not have an action or a method, or a submit input. — Andrew, Nov 17 '13 at 23:03

score 3 · Accepted Answer · edited Apr 04 '16 at 22:21

3

This was happening because I didn't have name attributes set on my inputs. Apparently, new FormData() and $.serialize() will ignore any inputs without names.

edited Apr 04 '16 at 22:21

hexacyanide

88,222
31
159
162

answered Nov 17 '13 at 23:21

Andrew

2,425
2
24
35

Can't build a FormData object out of existing form

1 Answers1