How to Get HTML Form Fields on Submit Event in JavaScript?

Let's suppose you have the following HTML <form> element:

<form id="form">
    <input type="text" name="fullName" value="foo bar" />
    <input type="email" name="email" value="[email protected]" />

    <input type="submit" />
</form>

To get any <form> field by its name or index (when a submit event is triggered), you can do any of the following:

1. Access the Form Field Using the HTMLFormElement.elements Property;
2. Directly Access the Form Field.

Accessing Form Fields via HTMLFormElement.elements on Submit Event

When a submit event handler is attached to a <form> element, event.target refers to the <form> element itself. Therefore, you can access form fields by using their name or index on the HTMLFormElement.elements object (or the event.target.elements object in this case), for example, like so:

document.getElementById('form').addEventListener('submit', function (event) {
    event.preventDefault();

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log(fullNameInput.value); // output: 'foo bar'
    console.log(emailInput.value); // output: '[email protected]'
}, false);

This works because the HTMLFormElement.elements property actually returns an HTMLFormControlsCollection object, which allows accessing of all the form fields contained within the <form> element by using the element's name and/or index.

The HTMLFormControlsCollection object also has the following methods for accessing form fields:

• HTMLFormControlsCollection.namedItem(name) (or HTMLFormElement.elements.namedItem(name));
• HTMLFormControlsCollection.item(index) (or HTMLFormElement.elements.item(index)).

The main difference between the two — i.e. accessing the form fields directly on the HTMLFormControlsCollection object versus doing so via the above-mentioned methods — is the fact that the former would return undefined if the element doesn't exist, while the latter would return null.

Therefore, as an alternative, you can also access form fields via these methods as shown below:

document.getElementById('form').addEventListener('submit', function (event) {
    event.preventDefault();

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.namedItem('fullName');
    const emailInput = formFields.item(1);

    console.log(fullNameInput.value); // output: 'foo bar'
    console.log(emailInput.value); // output: '[email protected]'
}, false);

Directly Accessing Form Fields on Submit Event

When a submit event handler is attached to a <form> element, event.target refers to the <form> element itself. Therefore, you can directly access the form fields by using their name or index directly on the event.target object, for example, like so:

document.getElementById('form').addEventListener('submit', function (event) {
    event.preventDefault();

    const form = event.target;

    const fullNameInput = form.fullName;
    const emailInput = form[1];

    console.log(fullNameInput.value); // output: 'foo bar'
    console.log(emailInput.value); // output: '[email protected]'
}, false);

This might not be the best approach as properties can get mixed up with other attributes specified on the <form> element. Instead, using form.elements property might be a better approach as it only returns the form fields contained within the <form> element.