Forms — JS: DOM API

There are two approaches to working with forms in modern front-end applications.

Sometimes, data on the page changes immediately as the form changes. These forms don't have any Save or Send buttons. Each form element is associated with a handler that tracks any changes. A typical example could be filtering data on a page.

In a more classic version, we send the form with a button. In this case, you need to use the submit form event:

const form = document.querySelector(/* form selector */);
form.addEventListener('submit', (e) => {
   // If we want to work with a form via JavaScript, then we need to stop it from sending(default action)
  e.preventDefault();
  // Doing something
});

Why not put a click event on the form submit button? Technically, we can do it, but it'll break the standard behavior. Browsers allow you to send forms from the keyboard by pressing the Enter key. Here, we send forms without pressing a button.

Processing the form is usually set up like this:

• The data from the form are extracted
• A request is made to the server / Data in the application are changed
• The appearance changes

We'll look at the second and third points in future lessons when we discuss AJAX. Here we'll talk about the first. How to get the form data.

There are two approaches: the right one and the wrong one. Let's look at the wrong one:

const input = document.querySelector(/* input field selector */);
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const { value } = input;
  // Doing something with the data
});

With this approach, you need to work with each form element individually. First, extract it from the DOM, then collect the values. There's no need to do this, however; you can do it correctly instead.

The correct way is to use a FormData object, which is available in the browser:

<form method="post">
  <input name="email" value="example@example.com">
  <input name="password" value="supersecret">
  <input type="submit" value="Sign Up">
</form>

const form = document.querySelector(/* the required form's selector */);
form.addEventListener('submit', (e) => {
  e.preventDefault();
  // We extract the form data from DOM automatically
  // Then we pass to the input a form element taken from the event
  const formData = new FormData(e.target);
  // Now you can work with them
  formData.get('email'); // example@example.com
  // values() returns an iterator, so we convert it to an array
  [...formData.values()]; // ['example@example.com', 'supersecret']
  // Also an iterator
  [...formData.entries()];
  // [['email', 'example@example.com'], ['password', 'supersecret']]

  // Conversion to a regular object
  Object.fromEntries(formData);
  // { email: 'example@example.com', password: 'supersecret' }
});

Extracting form elements

Sometimes, however, you have to access the form elements directly when we implement validation while changing the form, not when we send it.

In such cases, work with the elements of the form goes directly:

const input = document.querySelector(/* selector before the input field */);
input.addEventListener('change', (e) => {
  // Logic
});

If there are a lot of elements, then the code executing queries in the DOM will get cumbersome. We can avoid it by using the DOM features related to forms.

Each form contains the elements property, which returns an object with all elements of that form. The object keys are the names of the elements, and the values are the elements themselves:

<form method="post">
  <input name="email" value="example@example.com">
  <input name="password" value="supersecret">
  <input type="submit" value="Sign Up">
</form>

const form = document.querySelector(/* selector to form */);
form.elements.email // <input name="email" ...
form.elements.password // <input name="password" ...

// Processing
form.elements.email.addEventListener('change', () => {
  // Processing
});