How can I get all a form's values that would be submitted without submitting

javascript

form-data

ajax-requests

event-listeners

byNikita Barsukov·Aug 23, 2024

For extracting form values quickly, JavaScript offers an elegant one-liner:

let values = Array.from(new FormData(document.querySelector('form')));

It creates an array of [name, value] tuples from form elements that have a name attribute. A compact way of fetching form data using the FormData object in tandem with the Array.from() method.

Delving into the deeper parts now, we'll expand on the process, covering various techniques and nuances.

Unpacking the FormData object

Form values, got 'em? FormData object! It simplifies working with form data, either straight away or via XMLHttpRequest for AJAX requests:

let formData = new FormData(document.querySelector('form'));
for (let [field, value] of formData.entries()) {
    console.log(`Field: ${field}, Value: ${value}`);  // See, no magic involved!
}

The loop indicates accessing specific values from the FormData object. Especially handy for dynamic forms where fields may change over time.

Custom value collection using form elements

For a customized tour of the form, separation is at form.elements:

let form = document.querySelector('form');
let formElements = form.elements;
let formValues = {};

for (let element of formElements) {
    formValues[element.name] = element.value;
    // Who needs a name tag now?
}

formValues here is an object mapping form names to their values, assuming form inputs have a name attribute.

Footprints in jQuery: serialize() and serializeArray()

Unwilling to ditch jQuery? For a traditional query string or when dealing with a jQuery-friendly project, .serialize() or .serializeArray() can have your back:

let queryString = $('form').serialize();
console.log(`Documents needed: ${queryString}`);

let formArray = $('form').serializeArray();
console.log(`Counting apples: ${formArray.length}...`);

These methods come in handy when preparing data for Ajax calls - a classic case of the butler doing the dishes.

Encoding and validating data

Special characters in form values can put on a good show without proper encoding. encodeURIComponent is here to keep things serene:

let encodedData = '';
for (let [key, value] of new FormData(document.querySelector('form'))) {
    encodedData += `&${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
}
encodedData = encodedData.substring(1); // Aw, isn't that "&" a bit shy?

Remember to authorize the data's passport before departure with validation:

if (form.checkValidity()) {
    // Fasten your seatbelts, we are ready to fly with our data!
} else {
    // Sorry, your data needs some grooming first.
}

By confirming the validity of the form, we ensure cleanliness prior to any storage or submission process.

Addressing dynamic forms

Standard methods may need extra gears to handle forms dynamically modified on-the-fly. Techniques that stay apace with dynamic content are crucial here:

Watching the Watchmen: Event Listeners

With Javascript event listeners, you can shadow every step of a form, tracking changes:

document.querySelector('form').addEventListener('change', () => {
    // Someone touched the cookies, re-evaluate!
});

Sherlock Holmes style: Mutation Observers

When you're all in for an advanced manoeuvre, the MutationObserver is your Watson, paying attention to form changes:

let observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        if (mutation.type === 'childList') {
            // Oh look, the form had a haircut - let's re-fetch values!
        }
    });
});
observer.observe(document.querySelector('form'), { childList: true, subtree: true });