80% Работа с формами
Формы – это, пожалуй, один из самых нелюбимых элементов на странице – пока настроишь внешний вид, потом ещё проверь, что ввели нерадивые пользователи да выведи им информацию о допущенных ошибках, и, в конце концов, отправляешь на сервер данные с чувством облегчения от проделанной кропотливой работы. Так вот – о том, что поможет в этой самой работе, я и буду рассказывать.
Для начала, стоит напомнить события, с которыми чаще всего придётся работать:
change — изменение значения элемента
submit — отправка формы
Начнём с последнего, для опыта возьмём форму попроще:
И попробуем отправить её по ссылке из «action» посредством AJAX-запроса (для отслеживания события submit можно использовать одноименный «shorthand» метод):
Тут затесался один незнакомый метод – «.serialize()» – он в ответе за «сбор» данных с формы в удобном для передачи данных формате:
Также есть метод «.serializeArray()» – он представляет собранные данные в виде объекта:
Встречайте ещё один метод, который нам будет частенько нужен:
val() – получение значения первого элемента формы из выборки
val(value) – установка значения всем элементам формы из выборки
Теперь, с его помощью, мы можем добавить в предыдущий код немного проверки данных:
Хорошо, работать с формой теперь можем, осталось прикрутить более вменяемый вывод ошибок (да-да, за «alert()» бьём по рукам):
При повторной отправке формы не забудьте убрать сообщения, оставшиеся от предыдущей проверки:
Теперь можно объединить кусочки кода и получить следующий вариант:
Запустите предыдущий пример и попробуйте отправить форму ниже, получившийся AJAX-запрос вы сможете изучить в консоли браузера:
Я хотел ещё вернуться к списку событий формы и перечислить недостающие:
focus — фокус на элементе, для работы с данным событием так же есть «shorthand» метод «.focus()»; потребуется, если надо вывести подсказку к элементу формы при наведении
blur — фокус ушёл с элемента + метод «.blur()»; пригодится при валидации формы по мере заполнения полей
select — выбор текста в «textarea» и «input[type=text]» + метод «.select()»; если соберётесь разрабатывать свой WYSIWYG, то познакомитесь очень плотно
Обработка форм
»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.
jQuery предоставляет ряд методов, предназначенных для обработки событий, связанных с формой. Сейчас имеет смысл освежить ваши знания в этой области, поскольку формы являются предметом нашего рассмотрения. Интересующие нас методы и события, которые им соответствуют, описывались в статье «Использование прямых методов событий», далее мы более подробно рассмотрим эти события.
Реагирование на изменение фокуса формы
Методы blur() и focus() позволяют реагировать на изменения состояния фокуса формы. Обычно эта возможность используется для того, чтобы помочь пользователю сориентироваться в том, какой элемент имеет фокус (и, таким образом, какой элемент будет принимать вводимые данные). Соответствующий пример приведен ниже:
В этом примере мы выбираем все элементы input и регистрируем функцию в качестве обработчика обоих событий — focus и blur. Эта функция выделяет элемент зеленой рамкой, когда он принимает фокус, и убирает рамку, когда фокус теряется:
Обратите внимание на то, что здесь использован селектор input. Иными словами, элементы выбираются по дескриптору. В некоторых браузерах этот селектор действует более широко и, в частности, выбирает элементы button, способные инициировать отправку формы. Это означает, что при использовании расширенного селектора граница будет применяться не только к элементам input, но и к элементу button.
Реагирование на изменение значений формы
Событие change запускается, когда пользователь изменяет значение элемента form. Это событие особенно полезно, если вы предоставляете совокупную информацию, основанную на значениях, введенных в форме. В примере ниже показано, как это событие можно использовать в документе, представляющем сайт цветочного магазина, для отслеживания общего объема заказа:
В этом примере в ответ на событие change вычисляется сумма всех значений, введенных в полях input, и результат отображается в элементе span, который перед этим был добавлен в документ. Обратите внимание на то, что для получения значений элементов input используется метод val().
Реагирование на отправку формы
К более сложным операциям, которые можно выполнять по отношению к формам, относятся те, что связаны с отменой действий браузера по умолчанию, предусмотренных для элементов формы. Простой пример приведен ниже:
В этом сценарии регистрируется встроенная функция для обработки события submit. Это событие будет запускаться при выполнении пользователем щелчка на кнопке «Заказать». Если значение первого элемента input равно 0, вызывается метод, preventDefault(), который прервет предусмотренное для формы действие по умолчанию, заключающееся в отправке данных на сервер. При любом другом значении отправка формы выполняется.
Получение данных формы на jQuery
Статья, в которой рассмотрим различные способы простого извлечения данных из HTML формы. А именно познакомимся с тем, как это сделать с помощью метода each, а также методов jQuery специально предназначенных для этого. Объект FormData в данной статье рассматривать не будем.
jQuery – Получения данных формы с помощью метода each
Работу по извлечению данных c элементов формы посредством метода each рассмотрим на примере.
В минимальном варианте данная последовательность действий состоит из создания пустого объекта JavaScript, перебора элементов формы с помощью метода each и добавления в созданный объект данных соответствующих значениям определённых атрибутов ( name и value ) элементов.
При необходимости, после получения данных формы можно добавить различные проверки. Это предотвратит отправку не валидных данных на сервер.
Методы jQuery serialize и serializeArray оличаются друг от друга только форматом вывода данных. Метод serialize обычно применяется в том случае, когда результат (данные формы) необходимо положить в строку HTTP запроса. Метод serializeArray наоборот, используется тогда, когда результат, который он предоставил, как правило, ещё необходимо обработать.
Внимание: Методы serialize и serializeArray не сериализуют данные из элементов, которые используются для выбора файлов.
PHP код, обрабатывающий ajax запрос на сервере:
Вышеприведёный код просто формирует строку из данных формы на сервере, которая затем будет отправлена клиенту (браузеру).
Сериализация формы с помощью методов jQuery serialize и serializeArray 
Category: Forms
These methods and event handlers handle forms and their various elements.
Bind an event handler to the “blur” JavaScript event, or trigger that event on an element.
.change()
Bind an event handler to the “change” JavaScript event, or trigger that event on an element.
.focus()
Bind an event handler to the “focus” JavaScript event, or trigger that event on an element.
.focusin()
Bind an event handler to the “focusin” event.
.focusout()
Bind an event handler to the “focusout” JavaScript event.
jQuery.param()
Create a serialized representation of an array, a plain object, or a jQuery object suitable for use in a URL query string or Ajax request. In case a jQuery object is passed, it should contain input elements with name/value properties.
.select()
Bind an event handler to the “select” JavaScript event, or trigger that event on an element.
.serialize()
Encode a set of form elements as a string for submission.
.serializeArray()
Encode a set of form elements as an array of names and values.
.submit()
Bind an event handler to the “submit” JavaScript event, or trigger that event on an element.
Get the current value of the first element in the set of matched elements or set the value of every matched element.
Books
Copyright 2021 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more information. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation Terms of Use, Privacy, and Cookie Policies also apply. Web hosting by Digital Ocean | CDN by StackPath
jQuery plugin для форм с динамической структурой
Хочу поделиться с обществом собственным плагином, который упрощает работу с динамическими формами и называется jqDynaForm. Под динамическими формами я подразумеваю формы, в которые при заполнении пользователь может добавлять по необходимости дополнительные поля или блоки полей. Разумеется, в каждом месте разрешено добавлять только заранее разрешенные виды блоков. Вот примеры подобных простейших форм:
1. Контактная форма, в которой есть поле «телефон». Пользователь может добавить еще несколько дополнительных полей для телефонов, если возникнет желание.
2. Счет на оплату. Есть фиксированный набор полей, таких как «имя плательщика» и «номер счета». Кроме того, есть таблица с позициями. Каждая позиция состоит следующих полей: «наименование», «количество», «цена». Пользователь может добавлять произвольное количество дополнительных позиций.
Давайте рассмотрим работу с jqDynaForm на примере такого счета. Вот пример такой формы:
Давайте посмотрим на HTML код, который необходимо приготовить для плагина:
Выкину все лишнее, чтобы стало нагляднее:
Т.е. у нас есть некая базовая форма с фиксированным набором полей. Внутри этой формы мы размещаем холдер, DIV помеченный атрибутом «data-holder-for». Значение атрибута задает имя блока, который сюда можно вставлять. HTML код этого блока задается отдельно от формы и помечается атрибутом data-name.
Кнопки добавление, удаления пунктов, поведение drag-and-drop для сортировки и переноса полностью формируется плагином.
Чтобы получить значения полей формы надо сделать следующий вызов
и он вернет JSON объект следующей структуры:
Обратите внимание, что повторяющиеся вложенные блоки автоматически размещаются в массивах. Значения ключей в полях, это атрибут name в тегах INPUT и SELECT.
Если у вас есть уже такой готовый JSON объект (сформированный скриптом, или считанный из базы данных), то вы можете при помощи одного вызова воссоздать форму.
После этого вызова мы получим исходную форму с заполненными полями и сформированными вложенными блоками. Разумеется, при наличии правильной исходной формы и подготовленных блоков полей.
Пример посложнее
На самом деле, структура формы может быть гораздо сложней, потому что вы можете размещать холдеры не только в базовой форме, но и внутри динамических блоков. Холдер даже может ссылаться на самого себя, формирую древовидную рекурсивную структуру. Вот пример более сложной формы:
Перечислю наиболее важные фичи:
Также планирую добавить следующее возможности:
Работа с JSON
Как работать с полученной JSON структурой. Можно обрабатывать на JavaScript-е, можно отправить на сервер и превратить, например в php-array древовидную структуру.
Обычно значения полей хранят в базах данных. С классическими «плоскими» формами все понятно. Такая форма замечательно ложиться в одну запись таблицы реляционной базы данных. А тут форма древовидная, и структура данных соответственно тоже древовидная. Вариантов хранения много, вот некоторые:
Что меня побудило к созданию этого плагина
Я много занимаюсь разработкой разного рода веб-приложений. Многие приложения содержат большое количество форм. Создание обработчиков форм часто отнимают много времени. Есть разного рода решения, которые упрощают создание обычных, плоских форм. Но когда требуются динамические формы, то тут стандартные решения, как правило, уже мало помогают.
Вот типичный ход работы над проекта в стиле «ночной кошмар». От Заказчика с некоторым периодом поступают следующие требования:
Дабы избежать кошмара постоянного программирования всех этих кнопочек – «добавить», «удалить», «перенести», не мучаться с формированием динамических структур, удобно обрабатывать значения полей, я и задумался на созданием этого плагина.
Исходники
Заранее предупреждаю, что плагин еще сырой. Но если у общества будет интерес, то я планирую его дорабатывать и выкладывать следующие версии.
Страничка проекта находится на Google Code