Получение и установка значений форм

Zepto.js предоставляет компактный и эффективный способ работы с DOM, включая управление формами и их элементами. В этом разделе рассматриваются методы получения и изменения значений форм, текстовых полей, чекбоксов, радиокнопок и <select>-элементов.

Получение значений текстовых полей и <textarea>

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

var имя = $('#username').val();
var сообщение = $('#message').val();
  • $('#username') — выборка элемента по идентификатору.
  • .val() возвращает строку, содержащую текущее значение поля.

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

  • Для <input type="text"> и <textarea> метод возвращает содержимое в виде строки.
  • Пустые поля возвращают пустую строку "".
  • Метод можно применять к коллекции элементов; в этом случае вернется значение первого элемента из выборки.

Установка значений текстовых полей и <textarea>

Передача аргумента в метод .val() позволяет установить значение элемента:

$('#username').val('Иван');
$('#message').val('Привет, мир!');
  • Аргумент может быть как строкой, так и числом (число будет автоматически преобразовано в строку).
  • Можно применять к множественным элементам сразу: все выбранные элементы получат одинаковое значение.
$('input.name-field').val('Аноним');

Работа с чекбоксами

Чекбоксы требуют особого подхода, так как один name может соответствовать нескольким элементам.

Получение значения одного чекбокса:

var isChecked = $('#subscribe').is(':checked');
  • Метод .is(':checked') возвращает true или false.

Получение значений группы чекбоксов:

var выбранные = $('input[name="colors"]:checked').map(function() {
    return this.value;
}).get();
  • .map() перебирает все выбранные элементы.
  • .get() преобразует результат в обычный массив значений.

Установка состояния чекбокса:

$('#subscribe').prop('checked', true); // отметить
$('#subscribe').prop('checked', false); // снять отметку
  • Метод .prop() управляет свойством DOM, а не атрибутом, что важно для корректной работы в современных браузерах.

Установка состояния группы чекбоксов по значению:

var цвета = ['red', 'green'];
$('input[name="colors"]').each(function() {
    this.checked = цвета.includes(this.value);
});
  • Используется перебор элементов и установка свойства checked на основе массива значений.

Работа с радиокнопками

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

Получение выбранного значения:

var выбор = $('input[name="gender"]:checked').val();
  • Если ни одна радиокнопка не выбрана, вернется undefined.

Установка выбранного значения:

$('input[name="gender"]').each(function() {
    this.checked = this.value === 'male';
});
  • Проход по всем радиокнопкам с проверкой значения и установкой свойства checked.

Работа с <select> и <option>

Получение значения <select>:

var страна = $('#country').val();
  • Для одиночного выбора .val() возвращает строку значения выбранной опции.
  • Для множественного выбора (атрибут multiple) возвращается массив выбранных значений.

Установка значения <select>:

$('#country').val('RU'); // устанавливает опцию с value="RU"
  • Для множественного выбора можно передать массив значений:
$('#fruits').val(['apple', 'banana']);

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

  1. Формат возвращаемых значений:

    • Текстовые поля и <textarea> — строки.
    • Чекбоксы и радиокнопки — булевы значения (.is(':checked')) или массив выбранных значений.
    • <select multiple> — массив выбранных значений.

  2. Различие между .attr() и .prop():

    • Для установки состояния checked и selected всегда предпочтительно использовать .prop().
    • .attr() изменяет атрибут HTML, но не обновляет текущее состояние DOM.

  3. Множественная выборка:

    • Методы .val() и .prop() применяются ко всем выбранным элементам.
    • Для индивидуального контроля можно использовать .each() с функцией обратного вызова.

Динамическое обновление значений

Значения форм могут изменяться динамически на основе пользовательского ввода или внешних данных. Zepto позволяет быстро синхронизировать DOM с данными:

var данные = { name: 'Мария', subscribe: true, gender: 'female' };

$('#username').val(данные.name);
$('#subscribe').prop('checked', данные.subscribe);
$('input[name="gender"]').each(function() {
    this.checked = this.value === данные.gender;
});
  • Такой подход позволяет централизованно управлять формой через объект данных.
  • При использовании массивов и групп элементов легко синхронизировать множество чекбоксов и <select multiple>.

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

Для динамического реагирования на изменение значения:

$('#username').on('input', function() {
    console.log('Новое значение:', $(this).val());
});

$('input[name="colors"]').on('change', function() {
    var выбранные = $('input[name="colors"]:checked').map(function() {
        return this.value;
    }).get();
    console.log('Выбраны цвета:', выбранные);
});
  • input срабатывает при каждом вводе текста.
  • change применяется к чекбоксам, радиокнопкам и селектам после завершения изменения.

Эта методология позволяет точно и эффективно управлять формами, минимизируя количество кода, сохраняя компактность, что особенно важно при использовании Zepto.js в мобильных и легковесных приложениях.

Оглавление