Sometimes, we want to get HTML form values with JavaScript.

In this article, we’ll look at how to get HTML form values with JavaScript.

How to get HTML form values with JavaScript?

To get HTML form values with JavaScript, we use the FormData constructor with the form element.

For instance, we write

const handleSubmit = (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  const formProps = Object.fromEntries(formData);
};

to create the handleSubmit function that calls e.preventDefault to prevent the default server side submission behavior.

Then we create a FormData object with e.target.

And then we convert the formData object that has the form values to an object with Object.fromEntries.

Conclusion

To get HTML form values with JavaScript, we use the FormData constructor with the form element.