Блог Веб-разработчика.

Сегодня формы - это один из важнейших инструментов взаимодействия пользователей с веб-приложениями. Формы позволяют организовать эффективное управление информацией на сайте, состоянием самого сайта, оказывать услуги клиентам, передавать информацию другим пользователям, предоставлять доступ к закрытому разделу и многое-многое другое... Поэтому существует вполне естественное желание сделать формы более удобными и адаптированными под конкретные нюансы работы.

Одним из направлений такого улучшения может быть реализация возможности интерактивно, без перезагрузки страницы, управлять количеством полей для ввода данных, как в сторону увеличения, так и в сторону уменьшения. Это может быть очень удобно если необходимо добавить в базу данных приложения не одну, а сразу несколько записей; или если заранее не известно количество однотипных данных, каждое из которых требует отдельного поля для ввода (например, несколько телефонов или кредитных карт пользователя). В этой статье разберем одну из простых реализаций такой возможности через использование javascript библиотеки jQuery.

В самом низу, вы можете скачать архив с примерами, которые разбираются в этой статье.

Добавление нового поля в форму.

Создавать новое поле формы будем с помощью метода .append():

$("селектор").append("строка");

который добавляет “строку” во внутрь элемента с указанным “селектором”, при этом добавляемая строка следует за уже существующим содержимым.

Если рассматривать конкретный пример, то это может быть примерно так:

    <div id="add_field_area">
      <div id="add1" class="add">
        <label> Поле №1</label>
        <input type="text" width="120" name="val[]" id="val"  value="<?=$value?>"/>
      </div>
        </div>

Мы создаем блок div с id “add_field_area”, во внутрь которого будем добавлять блоки с id “add№”, которые в свою очередь содержат в себе заголовок добавляемого поля и само поле для ввода. Можно конечно сразу добавлять элемент <input ..../> без обрамления его в тег div, но именно такая структура нам будет очень полезна в будущем, когда будем реализовавать возможность удаления выбранного поля, если это понадобится пользователю.

Далее, внизу под данным полем размещаем кнопку “Добавить новое поле”, при нажатии на которую должно появляться одно новое поле для ввода информации. Создание поля будет происходить по событию onClick, с помощью функции addField, обращение к которой будет происходить при клике по кнопке:

    <div id="add_field_area">
      <div id="add1" class="add">
        <label> Поле №1</label>
        <input type="text" width="120" name="val[]" id="val"  value="<?=$value?>"/>
      </div>
 
    <div onclick="addField();" class="addbutton">Добавить новое поле</div>
 
        </div>

Сама функция addField() может быть реализована следующим образом:

<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript">
 
function addField () {
  var telnum = parseInt($("#add_field_area").find("div.add:last").attr("id").slice(3)) 1;
 
  $("div#add_field_area").append("<div id="add" telnum "" class="add"><label> Поле №" telnum "</label><input type="text" width="120" name="val[]" id="val"  value=""/></div>");
}
 
</script>

Сначала, как обычно, подключаем библиотеку jQuery и далее объявляем функцию addField(). Функция сначала вычисляет номер, который необходимо вставить в добавляемый элемент - по этому номеру, мы в последствии будем удалять ненужные поля. Затем addField() добавляет в div#add_field_area код блока div#add№ с полем формы внутри, код которого полностью аналогичен коду “Поле №1”, указанному чуть выше. Теперь при нажатии на кнопку “Добавить”, мы можем видеть как мгновенно появляется новое поле.

Удаление конкретного поля формы.

Для удаления элементов DOM-дерева можно пользоваться методом remove():

$("селектор").remove();

который применяется к элементу с указанным “селектором”. Будем считать, что по умолчанию одно поле всегда должно оставаться, все дополнительные можно удалять. Для этого в функции addField(), в строке параметра метода .append() мы добавим код кнопки удаления поля, при нажатии на которую будет идти обращение к функции deleteField (id), при этом в функцию будет передаваться номер поля, которое нужно удалить.

function addField () {
 
  var telnum = parseInt($("#add_field_area").find("div.add:last").attr("id").slice(3)) 1;
 
  $("div#add_field_area").append("<div id="add" telnum "" class="add"><label> Поле №" telnum "</label><input type="text" width="120" name="val[]" id="val"  value=""/>
 
  <div class="deletebutton" onclick="deleteField(" telnum ");"></div></div>");
 
}

Сама функция deleteField() может быть устроена предельно просто:

function deleteField (id) {
  $("div#add" id).remove();
}

Собственно все. Теперь при нажатии на кнопку (красный крестик) напротив выбранного поля - оно исчезнет, а вместе с ним и та информация, которая была записана в нем.

Обработка данных на сервере (php).

Когда форма содержит множественные поля, с однотипными данными, то естественно встает вопрос обработки данных, например перед отправкой в базу данных. В примере выше, этот вопрос решается указанием у поля формы атрибута name с параметром val[]. Это означает, что после отправки данных этой формы методом POST, значения этих полей будут помещены в массив $_POST[‘val’], элементы которого можно перебрать в цикле foreach (...) {...}, например:

foreach ($_POST["val"] as $value) {
  // ваш код....
}

Или, если необходимо, все данные этих однотипных полей “склеить” в одну строку с помощью функции implode():

$str = implode("|",$_POST["val"]);

Тогда все значения полей с name=”val[]” - будут объединены в строку с разделителем “вертикальная черта”.

Но, это обработка на стороне сервера, которая кстати говоря - более предпочтительна по соображениям безопасности. Но, могут возникнуть обстоятельства вынуждающие вас выполнять обработку таких полей на клиентской стороне: например у вас нет доступа к скриптам сервера (используется какой-то удаленный обработчик формы), или вы не можете по каким-то причинам изменить работу обработчика формы на вашем сервере. В таком случае можно так же пользоваться средствами языка javascript, а так как мы уже работаем с библиотекой jQuery - то и продолжим работать в ней.

Обработка данных на клиентской стороне.

Допустим наша задача, все данные этого множественного поля, объединить в строку с разделителем вертикальная черта “|”. На самом деле реализуется это достаточно просто.

Для начала, нам необходимо несколько модифицировать саму форму, а именно добавить одно скрытое поле:

<input type="hidden" name="values" id="values"  value="<?=$array?>"/>

в него мы будем помещать объединенные в одну строку данные и отправлять уже на сервер для стандартной обработки.

Далее, необходимо чуть модифицировать сами множественые поля ввода, над которыми мы работали выше, а именно: в атрибут name поместить нумерованный параметр, а так же добавить событие onBlur=”” - при котором будет идти обращение к функции writeFieldsVlues().

<input type="text" width="120" name="val1" id="val" onblur="writeFieldsVlues();"  value="<?=$value?>"/>

Сама функция writeFieldsVlues(), может быть объявлена следующим образом:

function writeFieldsVlues () {
  var str = [];
  var tel = "";
  for(var i = 0; i<$("input#val").length; i  ) {
    tel = $($("input#val")[i]).val();
    if (tel !== "") {
      str.push($($("input#val")[i]).val());
    }
   }
  $("input#values").val(str.join("|"));
}

То есть идет цикл по всем элементам input с id=”val”, из каждого извлекается значение атрибута value=”” (то что мы вводим в поле), и если это значение не пустое - помещаем в массив str. Далее массив объединяем в строку с разделителем “вертикальная черта” с помощью метода .join() и полученную строку записываем в атрибут value=”” скрытого поля input#values.

Для полноты действия, обращение к этой функции нужно добавить и в функцию deleteField (), чтобы удаление поля тоже приводило к обновлению информации в скрытом поле:

function deleteField (id) {
  $("div#add" id).remove();
  writeFieldsVlues();
}

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

Ссылки для скачивания.

Здесь Вы можете скачать сопроводительные материалы к статье:

add_new_fields_in_form_examples.zip (7Kb)

* * * * * * * * * * * *

Если информация этой статьи будет интересна и полезна Вашему кругу друзей и знакомых, то Вы можете опубликовать ссылку - тогда им проще будет ее найти. Они Вам будут благодарны:).

Комментарии к статье:


Всеволод Чупрыгин © webengineer.pro 2014. Все права защищены.
Копирование материалов сайта разрешено только с указанием имени автора (Всеволод Чупрыгин) и прямой индексируемой ссылки на источник на сайте www.WebEngineer.pro.
ИП Чупрыгин Всеволод Андреевич, ИНН: 333410747832, ОГРН: 311333426300044
http://vkontakte.ru/chuprygin_va, Google +

.
Проверить аттестат
Мы принимаем Webmoney Мы принимаем практически все платежи через Robokassa Мы принимаем Яндекс.Деньги Мы принимаем платежи через QIWI. Мы принимаем платежи через привязанные к QIWI карты VISA/Mastercard.