Submitting a form via AJAX using FormData in JavaScript

With FormData you can automatically submit all form fields to a server. Let's see how it's done.

Suppose we have the following form, in which the inputs have the name attributes:

public/index.html<form action="" method="GET">
  <input name="num1">
  <input name="num2">
  <input type="submit">
</form>

Let's submit this form via AJAX. First, we get a reference to the form into a variable:

public/client.jslet form = document.querySelector('form');

Now, in the request body, we specify the FormData object as data. And we will pass the reference to the form as a parameter to the object itself:

public/client.jsform.addEventListener('submit', function(event) {
  let promise = fetch('/handler/', {
    method: 'POST',
    body: new FormData(this) // we pass a reference to a form
  });
  
  event.preventDefault();
});

As a result, on a server we will be able to obtain the inputs values by their names from the name attributes:

server.jsexport default {
  '/handler/': function({post}) {
    console.log(post.num1);
    console.log(post.num2);
    return 'form data received';
  }
}