Получение и изменение значений форм

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

Получение значений полей формы

Dom7 позволяет получать значения элементов формы с помощью метода .val(). Этот метод универсален и работает с <input>, <textarea> и <select>.

import Dom7 from 'dom7';

const $input = Dom7('input[name="username"]');
const username = $input.val(); // возвращает текущее значение поля input
  • Для текстовых полей (text, email, password) .val() возвращает строку.
  • Для чекбоксов и радиокнопок возвращается значение атрибута value выбранных элементов. Для получения всех отмеченных чекбоксов удобно использовать фильтрацию:
const checkedValues = Dom7('input[name="interests"]:checked').map((el) => el.value);
  • Для селектов (<select>) метод .val() возвращает выбранное значение. Для множественного выбора возвращается массив выбранных опций.

Изменение значений полей

Метод .val() может использоваться не только для получения значения, но и для его установки. Достаточно передать новое значение в качестве аргумента:

Dom7('input[name="username"]').val('newUser');
Dom7('textarea[name="message"]').val('Привет, мир!');
  • Для селектов с множественным выбором можно передать массив значений:
Dom7('select[name="colors"]').val(['red', 'blue']);
  • Для чекбоксов и радиокнопок изменение значения через .val() работает вместе с установкой свойства checked:
Dom7('input[name="subscribe"][value="yes"]').prop('checked', true);

Метод .prop() в Dom7 аналогичен element.prop в jQuery и позволяет управлять булевыми свойствами элементов.

Очистка форм

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

Dom7('form#contactForm').find('input, textarea, select').each((el) => {
  if (el.type === 'checkbox' || el.type === 'radio') {
    el.checked = false;
  } else {
    el.value = '';
  }
});
  • find('input, textarea, select') возвращает все элементы формы.
  • each() позволяет выполнять обработку каждого элемента, используя стандартные свойства DOM.

Работа с событиями изменения форм

Для динамического реагирования на ввод Dom7 предоставляет метод .on(). Например, отслеживание изменения значения в поле:

Dom7('input[name="username"]').on('input', (event) => {
  console.log('Новое значение:', event.target.value);
});
  • Событие change срабатывает при потере фокуса и окончании редактирования поля.
  • Событие input срабатывает при каждом вводе символа и подходит для интерактивного контроля.

Для чекбоксов и радиокнопок события работают аналогично:

Dom7('input[name="subscribe"]').on('change', (e) => {
  console.log('Подписка изменилась:', e.target.checked);
});

Массовое получение и установка значений

Dom7 позволяет работать с формой целиком, используя метод serializeArray() и манипуляции через .each(). Прямой аналог serializeArray() в Dom7 отсутствует, но можно реализовать самостоятельно:

const formData = [];
Dom7('form#contactForm').find('input, textarea, select').each((el) => {
  if ((el.type === 'checkbox' || el.type === 'radio') && !el.checked) return;
  formData.push({ name: el.name, value: el.value });
});
console.log(formData);

Установка значений массово может выполняться через объект:

const values = {
  username: 'newUser',
  email: 'user@example.com',
  subscribe: true
};

Dom7('form#contactForm').find('input, textarea, select').each((el) => {
  if (values[el.name] !== undefined) {
    if (el.type === 'checkbox' || el.type === 'radio') {
      el.checked = !!values[el.name];
    } else {
      el.value = values[el.name];
    }
  }
});

Взаимодействие с атрибутами и свойствами форм

Dom7 облегчает работу с атрибутами полей формы через .attr() и .prop():

  • .attr('disabled', true) — делает поле недоступным для редактирования.
  • .prop('checked', true) — отмечает чекбокс или радиокнопку.
  • .removeAttr('required') — убирает обязательное заполнение.

Примеры:

Dom7('input[name="email"]').attr('placeholder', 'Введите email');
Dom7('input[name="subscribe"]').prop('checked', false);

Особенности работы с формами в Dom7

  1. Цепочки вызовов. Методы .val(), .prop(), .attr() возвращают объект Dom7, что позволяет выстраивать цепочки:
Dom7('input[name="username"]')
  .val('testUser')
  .attr('placeholder', 'Имя пользователя')
  .prop('disabled', false);
  1. Удобная фильтрация элементов. Использование CSS-селекторов позволяет выбирать конкретные поля:
Dom7('form#contactForm input:required')
  .each((el) => console.log(el.name, el.value));
  1. Совместимость с массивами значений. Особенно полезно для <select multiple> и групп чекбоксов.

Эти инструменты делают Dom7 мощным средством для получения и изменения значений форм, позволяя писать чистый, лаконичный и высокопроизводительный код без лишних повторений и сложных обходов DOM.

Оглавление