Javascript: get all form keys and values and combine them as javascript object to use with XHR 2 FormData

Question

I use this little snippet to get form values:

myForm = document.forms[1];
email = myForm.elements['email'];

however, if I plan to use this with XHR 2's FormData, I have to do this:

function sendForm() {
  var formData = new FormData();
  formData.append('email', email);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) { ... };

  xhr.send(formData);
}

is there any way to get all form data as one javascript object with which I can use FormData with?

Jan Turoň · Accepted Answer · 2013-06-06 09:42:37Z

2

Just set the form object as the FormData parameter:

function sendForm() {
  var myForm = document.forms[1];
  var formData = new FormData(myForm);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) { ... };
  xhr.send(formData);
}

Note: it also works with input type="file"

answered Jun 6, 2013 at 9:42

Jan Turoň

33.1k24 gold badges139 silver badges179 bronze badges

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

Comments

Ibu · Accepted Answer · 2016-12-27 22:48:36Z

-1

What you can do is, store all the information in an array and append them dynamically.

var myForm = document.forms[1];
var data = {};
data["email"] = myForm.elements["email"];
data["username"] = myForm.elements["username"];
data["password"] = myForm.elements["password"];
//  ... and so on...

now in your send for you can pass the data as argument and append all the data:

function sendForm(data) {
  var formData = new FormData();

  for(var i in data) {
    formData.append(i,data[i]);
  }

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) { ... };

  xhr.send(formData);
}

edited Dec 27, 2016 at 22:48

answered Jul 4, 2011 at 4:37

Ibu

44k14 gold badges82 silver badges109 bronze badges

Collectives™ on Stack Overflow

Javascript: get all form keys and values and combine them as javascript object to use with XHR 2 FormData

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related