Получение и обработка всех элементов 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