Публикация в группе: Полезное для WordPress

Добавлено в закладки: 3

Приветствую!

Часто пользуясь каким то скриптом или плагином можно наткнуться на одну полезную фишку - динамическое создание полей в форме. Такую возможность часто предоставляют пользователю, когда не хотят его ограничивать размером формы и предоставляют право добавлять столько полей, сколько он пожелает.

В качестве примера реализации можно посмотреть работу настроек дополнения подарков плагина wp-recall

2014-11-03 21-10-08 Подарки ‹ Плагины WordPress, разработка и продажа. — WordPress - Google Chrome

 

В этой статье рассмотрим вариант создания такой формы состоящей из динамически добавляемых полей.

Допустим у нас есть форма в которой мы предлагаем пользователю перечислить имена всех его родственников, по одному имени в каждое поле. Нехорошо получится если поля закончаться в самый неподходящий момент и конечно будет некрасиво, если полей будет предлагаться слишком много. Правильным решением будет предложить пользователю самостоятельно добавлять поля, столько, сколько ему будет необходимо.

Для начала рассмотрим простой HTML-код формы:

Данная форма состоит только из одного текстового инпута, кнопки "Добавить поле" и кнопки "Сохранить", при нажатии на которую данные с этой формы будут отправлены на обработку.

Обратите внимание, что текстовое поле и кнопка добавления находятся внутри ненумерованного списка #fio-list. В него мы и будем складывать все вновь добавленные поля, а пока он имеет лишь один дочерний элемент li.

Теперь рассмотрим jquery-скрипт, который и будет добавлять дополнительные поля в форму при нажатии на кнопку "Добавить поле"

Логика данного скрипта проста. При нажатии на кнопку с классом add-input мы получаем содержимое тега li в котором эта кнопка находилась и добавляем его в конец списка #fio-list, а кнопку по которой нажали удаляем. Теперь в данной форме мы можем добавлять столько полей сколько хочется.

Данные отправленные с этой формы будут находится в массиве $_POST['fio'] и получив этот массив для обработки мы сможем эти данные сохранить в удобном нам формате, чтобы потом, если это будет необходимо вывести их снова в этой форме, построив на основе этих данных уже заполненные поля.

22

Автор публикации

не в сети 6 часов

Андрей CS

10k

пока занят

Комментарии: 1771Публикации: 410Регистрация: 30-11--0001Продаж/Покупок: 16573/114