CODEWITHSUNDEEP
javascripthtmlform-data
Igor Cheglakov
Igor Cheglakov

Reputation: 555

Can't populate FormData object

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);

Upvotes: 0

Views: 896

Answers (2)

EternalHour
EternalHour

Reputation: 8621

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>

Upvotes: 1

wazz
wazz

Reputation: 5068

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'));

Upvotes: 1

Related Questions