Получение данных формы

Dom7 — это легковесная библиотека для работы с DOM, предоставляющая удобный синтаксис, аналогичный jQuery. Одной из ключевых задач при работе с веб-формами является получение данных, введённых пользователем. Dom7 упрощает этот процесс, позволяя быстро извлекать значения полей формы, управлять событиями и работать с группами элементов.

Выбор элементов формы

Для начала необходимо выбрать форму или её поля с помощью селекторов Dom7. Синтаксис аналогичен CSS:

import Dom7 from 'dom7';

const form = Dom7('form#myForm');          // выбор всей формы
const inputs = Dom7('input[name]');        // выбор всех input с атрибутом name
const textareas = Dom7('textarea');        // выбор всех textarea
const selects = Dom7('select');            // выбор всех select

Особенности:

  • Метод Dom7(selector) возвращает коллекцию элементов, даже если найден один.
  • Доступ к конкретному элементу осуществляется через индекс: inputs[0].

Получение значений отдельных полей

Для извлечения значения отдельного элемента используется свойство value. В Dom7 доступ к нему можно получить напрямую через ссылку на элемент:

const firstName = inputs[0].value;         // значение первого input
const message = textareas[0].value;        // значение textarea
const selectedOption = selects[0].value;   // выбранное значение select

Для проверки состояния чекбоксов и радио-кнопок используется свойство checked:

const agreeChecked = Dom7('input#agree')[0].checked;

Получение всех данных формы

Dom7 позволяет собрать все данные формы в объект с помощью перебора элементов:

const formData = {};
Dom7('form#myForm input, form#myForm textarea, form#myForm select').each((el) => {
    const name = el.name;
    if (!name) return; // пропуск элементов без атрибута name

    if (el.type === 'checkbox') {
        formData[name] = el.checked;
    } else if (el.type === 'radio') {
        if (el.checked) formData[name] = el.value;
    } else {
        formData[name] = el.value;
    }
});

Особенности:

  • Метод each перебирает каждый элемент коллекции Dom7.
  • Чекбоксы и радио требуют отдельной обработки, так как их значение зависит от состояния checked.
  • name атрибут является ключом для объекта данных.

Работа с событиями отправки формы

Для динамического получения данных формы часто используется событие submit. Dom7 упрощает его обработку:

Dom7('form#myForm').on('submit', function (event) {
    event.preventDefault(); // предотвращение стандартной отправки

    const formData = {};
    Dom7(this).find('input, textarea, select').each((el) => {
        const name = el.name;
        if (!name) return;

        if (el.type === 'checkbox') {
            formData[name] = el.checked;
        } else if (el.type === 'radio') {
            if (el.checked) formData[name] = el.value;
        } else {
            formData[name] = el.value;
        }
    });

    console.log(formData); // доступ к собранным данным
});

Особенности использования:

  • Dom7(this) позволяет работать с формой, на которой произошло событие.
  • Метод find возвращает вложенные элементы формы.
  • Событие submit требует вызова preventDefault() для предотвращения перезагрузки страницы.

Использование serializeArray через Dom7

Dom7 не имеет встроенного метода serializeArray, как jQuery, но можно создать эквивалент:

function serializeForm(form) {
    const data = [];
    Dom7(form).find('input, textarea, select').each((el) => {
        if (!el.name) return;

        if ((el.type === 'checkbox' || el.type === 'radio') && !el.checked) return;

        data.push({ name: el.name, value: el.value });
    });
    return data;
}

const serialized = serializeForm(Dom7('form#myForm')[0]);
console.log(serialized);

Особенности:

  • Формируется массив объектов {name, value} для удобной передачи данных через AJAX.
  • Исключаются неактивные чекбоксы и радио.

Работа с динамическими формами

При динамическом добавлении полей после загрузки страницы Dom7 сохраняет возможность их выбора и обработки:

Dom7(document).on('submit', 'form#dynamicForm', function(event) {
    event.preventDefault();
    const formData = {};
    Dom7(this).find('input, textarea, select').each(el => {
        if (!el.name) return;
        formData[el.name] = el.type === 'checkbox' ? el.checked : el.value;
    });
    console.log(formData);
});

Особенности:

  • Делегированная обработка через document обеспечивает работу с динамически добавленными формами.
  • Используется та же логика для сбора данных, что и для статических форм.

Итоговые возможности

Использование Dom7 для работы с формами позволяет:

  • Быстро получать значения полей любого типа.
  • Собирать данные в объекты или массивы для передачи на сервер.
  • Управлять событиями формы без использования чистого JavaScript или jQuery.
  • Обрабатывать динамически создаваемые поля.

Dom7 сочетает лёгкость и гибкость, делая работу с формами в JavaScript удобной и эффективной.

Оглавление