Сбор данных формы одной строкой в JavaScript и jQuery

Быстрый ответ

Чтобы извлечь данные из формы, в JavaScript используйте объект FormData:

const formData = new FormData(document.querySelector('form'));

Для получения значения определенного поля обратитесь к методу get:

console.log(formData.get('inputFieldName')); // Замените 'inputFieldName' на имя требуемого поля

В контексте jQuery для сбора данных из формы применяется метод .serialize():

const serializedData = $('form').serialize();

Если нужно преобразовать сериализованные данные в объект, используйте связку serializeArray и reduce:

const formDataObj = $('form').serializeArray().reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
}, {});

Познакомьтесь с AJAX

Отправку данных формы без перезагрузки страницы может обеспечить AJAX. Создайте объект FormData, определите параметры запроса в XMLHttpRequest и отправьте данные:

const formData = new FormData(document.querySelector('form'));
const xhr = new XMLHttpRequest();
xhr.open('POST', '/submit-form');
xhr.send(formData);

Альтернативно можно воспользоваться Fetch API:

fetch('/submit-form', {
    method: 'POST',
    body: new FormData(document.querySelector('form'))
});

Будьте готовы к работе с любыми формами

Отслеживание нескольких форм

Используйте делегирование событий, чтобы работать с произвольным количеством форм. Одно событие submit позволяет перехватывать данные сразу из всех форм:

document.addEventListener('submit', function(event) {
    if (event.target.tagName === 'FORM') {
        const formData = new FormData(event.target);
    }
});

Подробнее об этом расскажет наш спикер на видео

Учтите все типы полей

При извлечении данных не забывайте о элементах textarea, select, радиокнопках и чекбоксах. FormData автоматически учитывает их:

const formData = new FormData(document.querySelector('form'));
$('form').find('input, textarea, select').serializeArray();

Обработка специальных полей

Если в форме есть поля для массивов или WYSIWYG-редакторы, добавьте их содержимое отдельно:

formData.append('arrayField', JSON.stringify(arrayValues));
formData.append('richText', document.querySelector('.richTextEditor').innerHTML);

Визуализация

Коллекция данных из формы схожа со сбором фруктов в корзину:

Дерево (🌳): [🍏 Имя, 🍊 Email, 🍇 Телефон]
Корзина (🧺): {имя: '🍏', email: '🍊', телефон: '🍇'}

Аналогично работает извлечение данных в JavaScript и jQuery:

let имя = document.querySelector('#name').value;
let email = document.querySelector('#email').value;
let телефон = document.querySelector('#phone').value;

let formData = $('form').serializeArray();

Дополнительные техники для закрепления навыка

Используйте возможности ES6

Оператор расширения и другие возможности ES6 упрощают работу с данными формы:

const formData = new FormData(document.querySelector('form'));
const formDataObj = Object.fromEntries(formData.entries());

Работа с мультимедиа-данными при помощи FormData

FormData великолепно справляется с загрузкой файлов:

inputElement.addEventListener('change', (event) => {
    const files = event.target.files;
    const formData = new FormData();

    for (const file of files) {
        formData.append('files[]', file);
    }
});

Совместимость с различными браузерами

FormData отлично работает в современных браузерах, но для старых версий могут потребоваться полифиллы.

Техники поиска и устранения неисправностей

Решите проблемы использования формы, такие как конфликты имен и нетипичные элементы, применяя валидацию и логику сериализации.

Полезные материалы

1. FormData – Веб API | MDN — Всё о FormData в JavaScript.
2. .serialize() | Документация API jQuery — Метод .serialize() в jQuery.
3. jQuery AJAX get() и post() Методы — Как обновлять страницы без перезагрузки в jQuery.
4. Отправка multipart/formdata с jQuery.ajax – Stack Overflow — Применение FormData с jQuery на Stack Overflow.
5. Использование Fetch | CSS-Tricks — Руководство по использованию Fetch API.
6. GitHub – axios/axios: обещанное API HTTP для браузера и node.js — Репозиторий Axios.
7. Как использовать JavaScript Fetch API для получения данных | DigitalOcean — Применение JavaScript Fetch API по методике от DigitalOcean.