Получение и обработка всех элементов input в форме jQuery

Быстрый ответ

Чтобы собрать данные формы, воспользуйтесь методом jQuery .serializeArray().

Пример:

let formData = $('form#FormId').serializeArray();

Замените '#FormId' на идентификатор вашей формы. В результате будет получен массив объектов, в каждом из которых находятся поля name и value.

Взаимодействие с элементами формы

Важный навык для веб-разработчика – уметь управлять элементами формы, поскольку они лежат в основе взаимодействия с пользователем.

Обход элементов формы

С помощью метода .each() в jQuery можно осуществлять тщательную обработку каждого элемента формы: извлекать данные, изменять их и проводить другие операции.

Пример:

$('#FormId').find(':input').each(function() {
  let type = $(this).attr('type');
  let name = $(this).attr('name');
  let value = $(this).val();
  // Вы имеете все возможности для дальнейшего манипулирования данными!
});

При применении этого метода гарантировано, что ни один элемент не будет упущен.

Подробнее об этом расскажет наш спикер на видео

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

Формы могут быть разнообразными, но мы можем собрать данные с любых из них.

Пример:

$('#FormId input, #FormId select, #FormId textarea').each(function() {
  // Каждый элемент важен для нас!
});

Управление отправкой формы

Иногда необходимо предотвратить отправку формы до выполнения конкретных условий. В этом случае на помощь придут e.preventDefault() и метод .on().

Пример:

$('#FormId').on('submit', function(e) {
  if ($(this).find('input[required]').val().trim() === '') {
    e.preventDefault();
    // Похоже, вы что-то забыли.
  }
  // Если же всё в порядке, форму можно отправлять.
});

Визуализация

Представим все элементы формы, как плоды на дереве 🌳:

Сад Форм (🌳):
    – Текстовое поле (🍎)
    – Поле электронной почты (🍐)
    – Поле пароля (🍊)
    – Чекбокс (🍒)
    – Радиокнопка (🍇)

Произведём сбор урожая, используя:

$('#myForm').find(':input').serializeArray();
// 🧺 *Урожай увеличивается*

И вот, что получилось:

🧺: 
  – { name: 'username', value: 'JohnDoe' } (🍎)
  – { name: 'email', value: 'john@example.com' } (🍐)
  – { name: 'password', value: 's3cure' } (🍊)
  – { name: 'terms', value: 'agree' } (🍒 Отмечено)
  – { name: 'gender', value: 'male' } (🍇 Выбрано)

Всё готово к отправке, капитан!

Динамические формы

Формы могут быть не только статическими хранилищами информации. С помощью jQuery формы становятся интерактивными и адаптируются к ситуации.

Анимация при ошибках валидации

Представьте, что формы могут "танцевать", отражая ошибки валидации?

Пример:

if ($('#InputId').val().trim() === '') {
  $('#InputId').animate({backgroundColor: "#ffcccc"}, 500);
  // Подсвеченный элемент привлечёт ваше внимание!
}

Интерактивные элементы форм

Цветовая палитра элементов формы может изменяться в зависимости от действий пользователя.

Пример:

$('#FormId :input').on('change', function() {
  if ($(this).val().trim() !== '') {
    // Элемент наполнился жизнью и готов к действиям.
  }
});

Полезные материалы

1. .serialize() | Документация API jQuery
2. jQuery AJAX Отправка формы – Stack Overflow
3. .serializeArray() | Документация API jQuery
4. .val() | Документация API jQuery
5. Метод jQuery serialize()
6. FormData – Веб API | MDN
7. .each() | Документация API jQuery