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

Bliss.js — это легковесная библиотека для работы с DOM в JavaScript, предоставляющая удобные методы для получения, установки и манипуляции значениями полей форм и других элементов. В контексте работы с формами одной из ключевых задач является чтение текущих значений элементов ввода, чекбоксов, радиокнопок и селекторов.

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

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

let input = Bliss('#username');
let value = input.val();
console.log(value);

Метод .val() возвращает строку с текущим содержимым поля. Если поле пустое, результатом будет пустая строка "". Для элементов <textarea> поведение идентично.

Чтение значений чекбоксов

Чекбоксы представляют собой элементы, которые могут быть либо отмечены, либо нет. Bliss.js предоставляет удобный способ работы с ними через метод .checked():

let checkbox = Bliss('#subscribe');
let isChecked = checkbox.checked();
console.log(isChecked); // true или false

Метод .checked() возвращает булево значение: true, если чекбокс отмечен, и false в противном случае. Для получения значений группы чекбоксов можно использовать селектор:

let checkedValues = Bliss('input[name="options"]:checked').map(el => el.value);
console.log(checkedValues); // массив выбранных значений

Метод map здесь используется для извлечения значения каждого отмеченного чекбокса.

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

Радиокнопки имеют общую особенность: из группы с одинаковым name может быть выбрана только одна. Для получения значения выбранной радиокнопки применяют комбинированный подход:

let selected = Bliss('input[name="gender"]:checked').val();
console.log(selected); // значение выбранной кнопки

Если ни одна радиокнопка не выбрана, метод .val() вернёт undefined.

Получение значений select и multiple select

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

let select = Bliss('#country');
let selectedValue = select.val();
console.log(selectedValue);

Если элемент <select> поддерживает множественный выбор (multiple), метод .val() возвращает массив выбранных значений:

let multiSelect = Bliss('#languages');
let selectedValues = multiSelect.val(); 
console.log(selectedValues); // массив выбранных значений

Это позволяет сразу работать с множественными опциями без дополнительной фильтрации.

Работа с data-полями и нестандартными атрибутами

Bliss.js поддерживает получение произвольных атрибутов через метод .attr() и специальных data-* атрибутов через .dataset():

let element = Bliss('#product');
let dataId = element.dataset('id'); // получение data-id
let customAttr = element.attr('custom-attr'); // получение нестандартного атрибута

Методы возвращают строковые значения, соответствующие текущим атрибутам элемента.

Объединение методов для комплексных форм

Для сложных форм часто требуется собрать значения всех полей в один объект. Bliss.js позволяет комбинировать методы .val(), .checked() и перебор через .each():

let formData = {};
Bliss('#myForm input, #myForm select, #myForm textarea').each(el => {
    let field = Bliss(el);
    let name = el.name;
    if (el.type === 'checkbox') {
        formData[name] = field.checked();
    } else if (el.type === 'radio') {
        if (field.checked()) formData[name] = field.val();
    } else {
        formData[name] = field.val();
    }
});
console.log(formData);

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

Особенности работы с динамически добавленными элементами

Bliss.js автоматически поддерживает работу с элементами, добавленными в DOM после инициализации. Методы получения значений корректно работают с любым новым элементом, если использовать селекторы при каждом вызове:

let newValue = Bliss('#dynamicInput').val();

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

Итоговые рекомендации по использованию

  • Для текстовых полей и <textarea> использовать .val().
  • Для чекбоксов использовать .checked().
  • Для радиокнопок получать выбранное значение через :checked и .val().
  • Для селекторов применять .val(), возвращая массив для multiple.
  • Для data-* атрибутов и нестандартных полей применять .dataset() и .attr().
  • Для комплексных форм объединять методы в переборах через .each().

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

Оглавление