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

Question

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?

Answer 1

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>