Getting HTML form values

html

form-engineering

javascript

web-development

byNikita Barsukov·Dec 2, 2024

To retrieve form values in JavaScript, use the FormData object. Here's how to access all form data quickly:

const formData = new FormData(document.querySelector('form'));
formData.forEach((value, key) => console.log(`${key}: ${value}`));

This code loops over form inputs, printing keys and values. It smoothly handles different input types.

To manage when this function executes, such as after validating input, embed it in an event listener and prevent default form submission:

document.querySelector('form').addEventListener('submit', e => {
    e.preventDefault(); 
    //... processData(formData)
});

Retrieving form values: detailed guide

Let's explore multiple methods for gathering form values, taking a deep dive into each technique, its applications, and finer points.

Direct form field access

You can directly access and manipulate form fields using their ID or via document.forms:

let username = document.getElementById("username").value; // "user1337"
let userForm = document.forms['userForm'];
let password = userForm["password"].value; // "myp@$$w0rd"

Unique IDs offer precise and swift access, avoiding unnecessary complexity or bulky code.

Controlling events with prevention

e.preventDefault() is a lifesaver when you need to validate or process the form data before submission:

document.querySelector('form').addEventListener('submit', e => {
    if (!isFormValid()) {
        e.preventDefault(); 
    }
});

Serialization techniques for form data

Serialization is key when you plan to transmit, log, or store form data. Libraries like form-serialize or jQuery's serializeArray can assist:

const serializedData = serialize(document.querySelector('form'));
const serializedArray = $('form').serializeArray();

These libraries tidy up your data into a portable and storage-friendly format.

Granular control with FormData entries

FormData.entries() provides an iterator that lets you traverse name-value pairs. Ideal when you need to fine-tune your data processing:

for (let pair of formData.entries()) {
    console.log(pair[0]+ ', '+ pair[1]); 
}

Practical use-cases

Next, we shift to real-world scenarios, potential issues, and solutions.

Handling dynamic form changes

When you add or remove input fields in dynamic forms, FormData captures the form's present snapshot:

document.querySelector('form').addEventListener('change', e => {
    const myFormData = new FormData(e.target.form);
    // Process myFormData here
    // Update our form GMO-free, always fresh!
});

Validate, then pluck

Before working with form data, you might want to validate:

document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    if (validateForm(this)) {
        const formData = new FormData(this);
        // formData is now gluten-free and ready to serve!
    }
});

function validateForm(form) {
    // Perform validation
    // Don't forget to wash your hands...
    return true; // or false based on validation
}

Packaging as JSON

When dealing with AJAX or fetch requests, you might convert form data to a JSON object:

const jsonData = JSON.stringify(Object.fromEntries(new FormData(form)));

fetch('submitForm', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: jsonData, // Packages ready to be shipped. Bon voyage!
});