Сбор данных формы без отправки на сервер: JS/JQuery

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

Чтобы извлечь значения из формы, можно воспользоваться следующим синтаксическим конструктом на JavaScript:

let значения = Array.from(new FormData(document.querySelector('form')));

Этот фрагмент кода позволяет получить массив пар [имя, значение] для тех элементов формы, которые имеют атрибут name. Комбинация объекта FormData и метода Array.from() считается эффективным подходом к сбору данных из формы.

Разберём этот процесс более подробно, оценим различные методы и учтём их специфику.

Использование объекта FormData

Данные из формы собираются с помощью объекта FormData. Он значительно упрощает работу, в частности, при необходимости отправки данных через XMLHttpRequest для AJAX-запросов:

let formData = new FormData(document.querySelector('form'));
for (let [поле, значение] of formData.entries()) {
    console.log(`Поле: ${поле}, Значение: ${значение}`);  // Всё очевидно и логично.
}

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

Сбор значений через элементы формы

Если требуется выполнить индивидуальный перебор полей формы, можно обратиться к свойству form.elements:

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

for (let element of elements) {
    values[element.name] = element.value;
    // Нет необходимости в дополнительных уточнениях.
}

Объект values отображает названия полей на их значения, при условии, что элементы имеют именованный атрибут name.

Методы jQuery для извлечения данных: serialize() и serializeArray()

Если в проекте продолжает использоваться jQuery, то методы .serialize() и .serializeArray() могут быть полезны:

let queryString = $('form').serialize();
console.log(`Строка запроса: ${queryString}`);

let formArray = $('form').serializeArray();
console.log(`Количество элементов: ${formArray.length}...`);

Эти методы удобно применять для подготовки данных к Ajax-запросам.

Кодирование и валидация данных формы

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

let encodedData = '';
for (let [key, value] of new FormData(document.querySelector('form'))) {
    encodedData += `&${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
}
encodedData = encodedData.substring(1); // Удаляем первый символ "&".

Перед отправкой данных необходимо проверить их на корректность с помощью валидации:

if (form.checkValidity()) {
    // Все готово к отправке.
} else {
    // Некоторые данные требуют коррекции.
}

Так мы убеждаемся в правильности заполнения формы и пригодности данных к дальнейшей обработке.

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

Пусть у нас есть фотограф, который снимает семью:

Семейные портреты (👨‍👩‍👧‍👦): Отец 👨, Мать 👩, Дочь 👧, Сын 👦.

Момент съёмки зафиксирован, никто не переместился:

const familyPhoto = document.forms['familyForm'].elements;
let capturedData = {}; 
for (let member in familyPhoto) {
  if (familyPhoto.hasOwnProperty(member)) {
    capturedData[member] = familyPhoto[member].value;
    // Зафиксируем момент без лишних действий.
  }
}

Теперь можно проверить полученные данные:

📸 Всё на своих местах:
Имя Отца 👨: 'Иван',
Имя Матери 👩: 'Мария',
Возраст Дочери 👧: '7',
Увлечения Сына 👦: 'Робототехника'

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

Обработка динамически изменяемых форм

Стандартные методы не всегда достаточны для работы с формами, которые изменяются на лету. Следующие техники помогут при работе с динамическим контентом:

Отслеживание изменений: обработчики событий

Событийные слушатели позволяют отслеживать изменения формы в реальном времени:

document.querySelector('form').addEventListener('change', () => {
    // Изменения замечены — время действовать!
});

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

Детальное наблюдение: Mutation Observers

Для более детального отслеживания изменений мы можем применить MutationObserver, который позволяет следить за динамикой формы:

let observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        if (mutation.type === 'childList') {
            // Форма изменилась, пора снова собирать данные!
        }
    });
});
observer.observe(document.querySelector('form'), { childList: true, subtree: true });

Персонализированный подход

Сочетание обработки событий и извлечения данных из формы позволяет создавать надёжные решения для работы с формами в реальном времени.

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

1. FormData – Web API | MDN — Совершенствуйте работу с данными формы.
2. .serialize() | Документация jQuery API — Метод jQuery, упрощающий процесс сериализации значений формы.
3. HTML Стандарт — Глубокое изучение алгоритмов отправки формы.
4. GitHub – axios/axios: Promise based HTTP client for the browser and node.js — Axios: Надёжный инструмент для AJAX-отправки форм.
5. Свойства и методы форм — Погрузитесь в детали работы с элементами форм: узнайте больше о присваивании и получении значений.
6. Learn Forms | web.dev — Учите создавать HTML-формы и овладевайте искусством обработки данных форм с помощью этого руководства.
7. Эквиваленты методов jQuery в Vanilla JS · GitHub — Подробное сравнение между методами jQuery и Vanilla JS для сериализации данных формы.