Получение значений полей

Библиотека jQuery предоставляет унифицированный интерфейс для доступа к значениям текстовых полей, переключателей, списков и других элементов формы. Главный принцип — использование метода .val(), который позволяет как считывать, так и устанавливать значения.

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

Текстовые поля, области ввода и скрытые поля возвращают строку. Метод .val() обращается к текущему состоянию DOM и поэтому всегда возвращает актуальное значение.

// Чтение значения текстового поля
var name = $('#username').val();

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

var age = Number($('#age').val());

Работа с многострочными полями <textarea>

Для <textarea> метод остаётся тем же и возвращает содержимое без каких-либо дополнительных преобразований.

var commentText = $('textarea#comment').val();

Важно учитывать наличие переноса строк, который остаётся в строке неизменным.

Переключатели и чекбоксы

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

Радиокнопки (input[type="radio"])

Радиокнопки объединяются по имени. Получение выбранного значения:

var selected = $('input[name="gender"]:checked').val();

Возвращается значение атрибута value выбранного элемента.

Чекбоксы (input[type="checkbox"])

Чекбокс может иметь либо одно, либо несколько значений в зависимости от разметки. Для одиночного варианта используется проверка состояния:

var subscribed = $('#news').prop('checked');

При множественном выборе требуется собрать набор значений:

var roles = $('input[name="roles[]"]:checked')
  .map(function() { return $(this).val(); })
  .get();

Списки <select>

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

var country = $('#country').val();

Для множественного выбора возвращается массив выбранных значений:

var langs = $('#languages').val(); // ['en', 'de', 'fr']

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

Часто требуется собрать набор значений сразу. Библиотека jQuery предоставляет готовый механизм сериализации.

Метод .serialize()

Возвращает строку в формате URL-параметров:

var params = $('#profileForm').serialize();
// например: "name=Alex&age=30"

Такой формат удобен для передачи через AJAX-запросы.

Метод .serializeArray()

Возвращает массив объектов, каждый из которых содержит пару name и value:

var data = $('#profileForm').serializeArray();
/*
[
  {name: "name", value: "Alex"},
  {name: "age", value: "30"}
]
*/

Этот вариант удобен при преобразовании в собственные структуры данных.

Особенности получения значений при динамических изменениях

Значения, изменённые пользователем, доступны немедленно. При работе с динамически созданными формами рекомендуется учитывать, что элементы должны быть добавлены в DOM до вызова .val() или методов сериализации.

Сравнение .val() и .prop() при работе с состоянием элементов

  • .val() возвращает или устанавливает значение элемента формы.
  • .prop() обрабатывает свойства DOM-узла, такие как checked, selected или disabled.
// Получение состояния
var isDisabled = $('#submit').prop('disabled');

Использование .prop() предпочтительно для булевых свойств, тогда как .val() служит для получения пользовательских данных.

Установка значений как часть процесса получения данных

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

$('#username').val('NewUser');
$('#languages').val(['en', 'fr']);

Установка значения влияет на последующее получение данных без перезагрузки страницы.

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

Получение значения зачастую происходит в обработчиках событий change, input и submit. jQuery предоставляет удобный механизм подписки:

$('input, select, textarea').on('change', function() {
  var current = $(this).val();
  // дальнейшая обработка значения
});

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

Сводные ключевые моменты

  • Метод .val() является универсальным интерфейсом для работы с данными форм.
  • Для булевых свойств предпочтительно использовать .prop().
  • Списки и чекбоксы могут возвращать массив значений.
  • .serialize() и .serializeArray() упрощают сбор данных целой формы.
  • Полученные значения всегда отражают текущее состояние DOM, включая введённые пользователем данные.
Оглавление