Categories
JavaScript Answers

How to get HTML form values with JavaScript?

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *