Исходники.Ру - Программирование
Исходники
Статьи
Книги и учебники
Скрипты
Новости RSS
Магазин программиста

Главная » Статьи Web-мастеру » JavaScript - Статьи »

Обсудить на форуме Обсудить на форуме

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

Очень часто при создании 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 открывает нам много новых возможностей для создания удобного пользовательского интерфейса. В частности, данный приём используется автором этих строк в интерфейсе администратора своего сайта для добавления нескольких картинок к странице в одной форме.


Может пригодится:


Автор: Дмитрий Верещака
Прочитано: 12607
Рейтинг:
Оценить: 1 2 3 4 5

Комментарии: (7)

Прислал: Klushin Herman
В FireFox работает удаление но не работает добавление - почемуто все равно переходит на воыюзрз

Прислал: Alik
Мне кажется, приавильнее добавлять|удалять строки, используя DOM и функции insertRow(), deleteRow(), insertCell()

Прислал: Avalon
http://wdc.3bb.ru/ - "WEB DESIGN CLUB" - форум о web-дизайне, программировании и мн. др.

Прислал: Алексей
Толком не прочитал, может это где то и отмечено, но не еализовано это точно. если имееем одну строку для ввода, то нажав на Удалить мы удаляем и её, может это и правильно с точки зрения использования: значит нет данных для этого поля, НО вот ведь инт

Прислал: Алексей
ПРДОЛЖУ Но вот ведь интересно, но логично, теперь нельзя добавить строки.

Прислал: loonySan
Спасибо за скрипт - нормально работает!Чтобы не удалялась 1я строка, надо прописать условие if (q!=0) в функцию rmline(q)

Прислал: Даня
а не проще ли динамически создавать строки через appendChild, createElement? или еще проще получить текущий innerHTML для тэйбла и добавить в него код новой строки

Добавить комментарий
Ваше имя*:
Ваш email:
URL Вашего сайта:
Ваш комментарий*:
Код безопастности*:

Рассылка новостей
Рейтинги
© 2007, Программирование Исходники.Ру