Главная страница статей --> Советы по фотошопу, графике и хитрости в построении php кода

Создание динамических форм с помощью JavaScript

Источник: realcoding.net

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

Без использования JavaScript эту задачу можно решить двумя путями:

  1. Ограничить количество полей ввода каким-либо максимально разумным числом. Например, количество людей, у которых число детей больше 5, относительно невелико. Однако этот способ несколько некрасивый - во-первых, мы изначально загромождаем форму большим числом полей ввода, причём, большинству пользователей понадобятся от силы два - три первых, а во-вторых, мы всё-таки ограничиваем пользователя в возможности указать полную информацию о себе - так, если форму пожелает заполнить человек, у которого 10 сыновей, то некоторыми из них ему придётся пожертвовать.
  2. Осуществлять ввод информации поэтапно. Например, на первом этапе предложить пользователю ввести количество фотографий, которые он желает загрузить на сервер, а на втором этапе при помощи скрипта на сервере сформировать форму с нужным количеством полей ввода.

Однако, используя JavaScript, мы можем облегчить пользователю ввод информации о себе. Сделать это можно, например, следующим образом:

Пусть, для определённости, пользователю необходимо ввести информацию о детях, а для упрощения примера - только имя и дату рождения. Со стороны пользователя нам понадобится браузер, понимающий тэг <span> и регулярные выражения, поддерживающий функцию getElementById объекта document, а также понимающий свойство innerHTML, например, Internet Explorer 5.5

Оформим ту часть формы, которая содержит информацию о детях, в виде таблицы. В самой первой строке таблицы мы разместим названия столбцов и добавим ещё одну ячейку, в которой разместим ссылку на добавление ещё одной строки с полями ввода информации. Во второй строке таблицы мы разместим сами поля ввода информации плюс ячейку со ссылкой на удаление строки с информацией. Чтобы можно было отличить строку данных от строки названий, добавим в тэг <tr> параметр id="newline" и номер строки в квадратных скобках (чтобы было легче отличить номер строки от символа 0) nomer="[0]". Затем поместим всю таблицу во внутрь тэга span с каким-либо именем, например, table. И напоследок, добавим еще поле ввода типа hidden для того, чтобы считать строки таблицы.

В итоге у нас должно получиться что-то вроде следующего HTML-кода:

<span id=table>

<
table border=0 cellspacing=0 cellpadding=3>

<
caption>Сведения о детях</caption>

<
tr><td>Имя</td><td>Дата рождения</td><td><a href=#

onclick=return addline();>добавить</a></td></tr>

<
tr id=newline nomer=[0]>

<
td><input type=text name=name[0]></td><td><input type=text name=date[0]></td>

<
td valign=top><a href=# onclick=return rmline(0);>удалить</td></tr></table>

</
span>

<
input type=hidden name=count value=0>

Чтобы вся эта конструкция заработала, необходимо еще написать две функции на JavaScript: добавление новой строки и удаление ошибочно добавленной строки. Причём, в данном примере предполагается, что количество строк с данными может быть и нулевым, кроме того, у данной реализации динамической формы есть недостаток: если удалить все строки, то добавить строки уже будет нельзя.

<script>

function
addline()

{

c=++document.getElementById(count).value; // увеличиваем счётчик строк

s=document.getElementById(table).innerHTML; // получаем HTML-код таблицы

s=s.replace(/[\r\n]/g,); // вырезаем все символы перевода строк

re=/(.*)(<tr id=.*>)(<\/table>)/gi;

// это регулярное выражение позволяет выделить последнюю строку таблицы

s1=s.replace(re,$2); // получаем HTML-код последней строки таблицы

// заменяем все цифры к квадратных скобках

s2=s1.replace(/\[\d+\]/gi,[+c+]);

// на номер новой строки

s2=s2.replace(/(rmline\()(\d+\))/gi,$1+c+));

// заменяем аргумент функции rmline на номер новой строки

s=s.replace(re,$1$2+s2+$3);

// создаём HTML-код с добавленным кодом новой строки

document.getElementById(table).innerHTML=s;

// возвращаем результат на место исходной таблицы

return false; // чтобы не происходил переход по ссылке

}

function
rmline(q)

{

s=document.getElementById(table).innerHTML;

s=s.replace(/[\r\n]/g,);

re=new RegExp(<tr id=?newline? nomer=?\\[+q+.*?<\\/tr>,gi);

// это регулярное выражение позволяет выделить строку таблицы с заданным номером

s=s.replace(re,);

// заменяем её на пустое место

document.getElementById(table).innerHTML=s;

return
false;

}

</script>

Таким образом, мы обнаружили, что использование регулярных выражений в JavaScript+DHTML открывает нам много новых возможностей для создания удобного пользовательского интерфейса. В частности, данный приём используется автором этих строк в интерфейсе администратора своего сайта для добавления нескольких картинок к странице в одной форме.



Похожие статьи:
- XML-Sapiens - орудие разделения функциональности сайта и программного ядра
- XML: возможности и перспективы
- Функци постраничного вывода в PHP
- Платформо-независимый динамический сайт – миф или реальность?
- Модуль CGI.pm
- *.JS, когда грузиться думаешь?
- Работа с сессиями в perl
- Image::Magick или фотошоп для perl
- Приватность в Интернет
- Подпись или аватар на пхп
- Сбор статистики на PHP
- Классы и объекты в РНР со Штирлицом и Мюллером
- Как назвать Web-сайт?


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |

Контакты
Редакция:
[0.001]