Working with FormData in JavaScript

Let's have some form:

html<form action="/target/" method="POST">
  <input name="test1" value="123">
  <input name="test2" value="456">
  <input type="submit">
</form>

Let's say we want to get the data of this form as key-value pairs. It is clear that for this we will have to run a loop and form what we want in it. In JavaScript, however, there is a simpler way - you can use the special FormData object, which allows you to get form data in an ordered form.

Let's take a look at how this object works. First, we get a reference to our form:

javascriptlet form = document.querySelector('form');

Now let's create an object with our form:

javascriptlet formData = new FormData(form);

We can output our object to the console, but with such an output we will not see the form data:

javascriptconsole.log(formData);

Let's convert our object to an array to see the form data:

javascriptconsole.log(Array.from(formData));