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?
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>If you want to the value of an input field named "XYZ" you could access it like this when the submit event is fired.
document.querySelector('[name="XYZ"]').value