Can't populate FormData object

Question

Trying to figure out FormData, but can't populate it. Other similar questions were because of lacking name attribute to form elements, but it seems to not be the case there.

HTML code:

<form class="testForm" action="/database" method="put">
            <input type="text" name="bar" value="foo">
</form>
<button type="button" class="testButt" name="testButt">click me!</button>

JS code:

const testButt = document.querySelector('.testButt');
const testForm = document.querySelector(".testForm");

putDataTest = function(){

    var xhr = new XMLHttpRequest();
    var formData = new FormData(testForm);
    console.log(formData);      // using existing form as a source, returns an empty formData object;
    formData.append("foo", "bar");
    console.log(formData);      // populating the object explicitly, still empty formData object;
    xhr.open('PUT', '/database');
    xhr.send(formData);         // server sees req.body as empty
}

testButt.addEventListener("click", putDataTest);

score 1 · Accepted Answer · answered Sep 14 '19 at 20:23

1

Try

console.log(document.forms[0].bar.value); // gets value from textbox.

Create your own form data:

var formData = new FormData();     // this is a *new* FormData object.
formData.append('foo', 'bar');
console.log(formData.get('foo'));

answered Sep 14 '19 at 20:23

wazz

4,953
5
20
34

Using `get` method seems to be working correctly. Getting data from the request should be another question, thanks! – Igor Cheglakov Sep 14 '19 at 20:44

EternalHour · Answer 2 · 2019-09-14T21:08:20.753

The data is actually there, but you can't access the values directly by outputting the object with console.log(formData). See How to inspect FormData?. You can also output specific values by using the get() method.

Here's an example:

const testButt = document.querySelector('.testButt');
const testForm = document.querySelector(".testForm");

putDataTest = function() {

  var xhr = new XMLHttpRequest();
  var formData = new FormData(testForm);
  formData.append("new", "foo");
  console.log(formData.get('new'));
  for (var pair of formData.entries()) {
    console.log(pair[0] + ', ' + pair[1]);
  }
  xhr.open('PUT', '/database');
  xhr.send(formData); // server sees req.body as empty
}

testButt.addEventListener("click", putDataTest);

<form class="testForm" action="/database" method="put">
  <input type="text" name="foo" value="bar">
  <input type="text" name="bar" value="foo">
</form>
<button type="button" class="testButt" name="testButt">click me!</button>

Can't populate FormData object

2 Answers2