Портал для веб-мастера
Вход пользователей
Поиск статей
WoWeb.ru » Статьи » Программирование для Web » JavaScript

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

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

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

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

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

Оформим ту часть формы, которая содержит информацию о детях, в виде таблицы. В самой первой строке таблицы мы разместим названия столбцов и добавим ещё одну ячейку, в которой разместим ссылку на добавление ещё одной строки с полями ввода информации. Во второй строке таблицы мы разместим сами поля ввода информации плюс ячейку со ссылкой на удаление строки с информацией. Чтобы можно было отличить строку данных от строки названий, добавим в тэг <tr> параметр id="newline" и номер строки в квадратных скобках (чтобы было легче отличить номер строки от символа 0) nomer="[0]". Затем поместим всю таблицу во внутрь тэга span с каким-либо именем, например, table.
В итоге у нас должно получиться что-то вроде следующего 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> 
Чтобы вся эта конструкция заработала, необходимо еще написать две функции на JavaScript: добавление новой строки и удаление ошибочно добавленной строки. Причём, в данном примере предполагается, что количество строк с данными может быть и нулевым, кроме того, у данной реализации динамической формы есть недостаток: если удалить все строки, то добавить строки уже будет нельзя. Впрочем, далее в коде программы есть вариации, которые запрещают удалять строку, если она осталась одна.
<script> var c=0; //счётчик количества строк function addline() { 	c++; // увеличиваем счётчик строк 	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) { // if (c==0) return false; else c--; // если раскомментировать предыдущую строчку, то последний (единственный)  // элемент удалить будет нельзя. 	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 открывает нам много новых возможностей для создания удобного пользовательского интерфейса. В частности, данный приём используется автором этих строк в интерфейсе администратора своего сайта для добавления нескольких картинок к странице в одной форме.
Автор: Дмитрий Верещака · Добавлена: 2003-09-08
Просмотров: 6883 · Рейтинг: 2.7

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Категории раздела
Flash
Apache
WWW
PhotoShop
Веб-дизайн
Раскрутка и реклама
Базы данных
3D графика
Хостинг
Истории веб-мастеров
Web-технологии
Сетевая безопасность
Программирование для Web
Операционные системы

Новые статьи
Лучшие статьи
Популярные статьи
Комментируемые статьи
Разделы сайта
Скрипты
Статьи
Шрифты
Флэш исходники
HTML шаблоны
Партнерки
Клипарты
Смайлы
Фоны
Гифы
Иконки
Опрос сайта
Ведете ли вы блог?
Всего ответов: 60032
Наша кнопка
WoWeb.ru - портал для веб-мастера