Question

113

Do SubmitEvents made by a 'submit' event contain the form values?

rated 0 times [ 119] [ 6] / answers: 1 / hits: 8069 / 2 Years ago, mon, may 23, 2022, 12:00:00

I have an HTML form with multiple inputs and a submit button. I created an eventlistener on the form that listens for 'submit' events. This passes a SubmitEvent into the callback function.

What I'm wondering, is there a getter or quick object property that can take in the input name (AKA input[name="XYZ"] and return what the input's value was at the time of submission?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

amari

Add To Favorites

Follow

Total Points: 736

Total Questions: 111

Total Answers: 90

Location: Saint Pierre and Miquelon

Member since Fri, Jan 28, 2022

2 Years ago

amari questions

1 ERR_UNHANDLED_REJECTION UnhandledPromiseRejection when awaited inside an array of promise Objects

Mon, Jun 21, 21, 00:00, 3 Years ago

1 Dropdown with Search Box using Bootstrap Selectpicker not working

Thu, Jun 3, 21, 00:00, 3 Years ago

1 Redux-Toolkit: How to reject a createAsyncThunk?

Sat, May 15, 21, 00:00, 3 Years ago

1 Webpack, optimization chunking gives Conflict: Multiple chunks emit assets to the same filename error

Wed, Mar 3, 21, 00:00, 3 Years ago

1 Chrome extension - migrate from manifest v2 to v3

Tue, Dec 15, 20, 00:00, 3 Years ago

View All

answered 2 Years ago shekinah · Accepted Answer

No.

The target property of the event will reference the form element. From that you can access the form controls (via querySelector, elements or any other DOM method).

That will give you the values at the current time, not at the time the event fired.

If you want that, you'll need to copy the values before they change.

document.querySelector('form').addEventListener('submit', e => {

  e.preventDefault();

  const data = new FormData(e.target);

  console.log([...data.entries()]);

});

<form>

  <input name=one value=1>

  <input name=two value=2>

  <button>Submit</button>

</form>