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

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

Метод .val()

Основной метод для получения и установки значений полей формы — .val(). Его поведение зависит от того, вызывается ли метод с аргументом или без него:

// Получение значения
let value = u('input[name="username"]').val();

// Установка значения
u('input[name="username"]').val('JohnDoe');
  • Без аргумента метод возвращает текущее значение первого элемента из набора.
  • С аргументом метод устанавливает указанное значение для всех элементов выборки.

Метод .val() работает с элементами <input>, <textarea>, <select> и позволяет корректно обрабатывать разные типы полей.

Работа с разными типами <input>

  1. Текстовые поля (text, password, email)
u('#email').val('user@example.com');

Значение устанавливается напрямую в атрибут value.

  1. Чекбоксы (checkbox)

Для чекбоксов важно учитывать их состояние (checked):

// Установка состояния
u('#subscribe').val(true); // устанавливает checked
u('#subscribe').val(false); // снимает checked

// Альтернативный способ через атрибут
u('#subscribe').attr('checked', true);

При работе с массивом значений (например, несколько чекбоксов с одинаковым name) .val() позволяет установить несколько выбранных значений:

u('input[name="interests"]').val(['music', 'sports']);
  1. Радиокнопки (radio)

Для радиокнопок установка значения выбирает элемент с соответствующим value:

u('input[name="gender"]').val('female');

Все остальные радиокнопки в группе автоматически становятся невыбранными.

  1. Селекты (select)

Для <select> метод .val() корректно выбирает опцию с указанным значением:

u('#country').val('RU'); // выбирает <option value="RU">

Если указано значение, которого нет среди опций, выборка сбрасывается.

Установка значений текстовых областей (textarea)

<textarea> работает так же, как текстовые поля:

u('#message').val('Привет, мир!');

Метод корректно обновляет текст внутри тега <textarea>.

Множественные элементы

Если выборка возвращает несколько элементов, установка значения выполняется для всех элементов одновременно:

u('input[name="tags"]').val('JavaScript');

В результате все поля tags получат одно и то же значение.

Комбинация с другими методами

Метод .val() удобно комбинировать с другими методами Umbrella JS:

// Очистка поля и установка нового значения
u('#username').val('').val('NewUser');

// Установка значения для всех текстовых полей в форме
u('form#profile input[type="text"]').val('Default');

Особенности

  • При установке значения для checkbox и radio .val() проверяет совпадение с value элемента.
  • Для <select multiple> можно передавать массив значений для выбора нескольких опций сразу:
u('#fruits').val(['apple', 'banana']);
  • Метод цепочечный, что позволяет комбинировать несколько операций:
u('#input1').val('Test').addClass('active').attr('data-updated', true);

Примеры практического применения

  1. Автозаполнение формы из объекта данных:
const data = {
  username: 'JohnDoe',
  email: 'john@example.com',
  gender: 'male',
  interests: ['music', 'sports'],
};

u('input[name="username"]').val(data.username);
u('input[name="email"]').val(data.email);
u('input[name="gender"]').val(data.gender);
u('input[name="interests"]').val(data.interests);
  1. Сброс формы:
u('form#signup input, form#signup textarea, form#signup select').val('');

Все поля будут очищены одновременно без необходимости обходить каждый элемент вручную.

Umbrella JS делает работу с формами максимально лаконичной и интуитивной. Метод .val() объединяет функции получения и установки значений для всех типов полей, включая текстовые, радио, чекбоксы и селекты, а также поддерживает массивы значений для групп элементов. Его цепочечность и совместимость с другими методами библиотеки обеспечивают гибкое управление формами.

Оглавление