Ключевые слова:html, javascript, form, (найти похожие документы)
From: Дмитрий Верещака <dmitry@rsl.ru>
Newsgroups: email
Date: Mon, 28 Jul 2003 14:31:37 +0000 (UTC)
Subject: Создание динамических форм с помощью JavaScript
Создание динамических форм с помощью JavaScript
Очень часто при создании HTML-форм возникает потребность узнать у
пользователя значения однотипных параметров, количество которых
заранее неизвестно. Например, если это форма добавления сообщения в
форум с возможностью прикрепить один или несколько файлов, например, с
фотографиями. Другим примером может служить форма с анкетой, в которой
есть сведения о детях. И в том и другом случае невозможно заранее
предположить количество полей, которые пожелает заполнить посетитель
сайта.
Без использования JavaScript эту задачу можно решить двумя путями:
1. Ограничить количество полей ввода каким-либо максимально разумным
числом. Например, количество людей, у которых число детей больше
5, относительно невелико. Однако этот способ несколько некрасивый
- во-первых, мы изначально загромождаем форму большим числом полей
ввода, причём, большинству пользователей понадобятся от силы два -
три первых, а во-вторых, мы всё-таки ограничиваем пользователя в
возможности указать полную информацию о себе - так, если форму
пожелает заполнить человек, у которого 10 сыновей, то некоторыми
из них ему придётся пожертвовать.
2. Осуществлять ввод информации поэтапно. Например, на первом этапе
предложить пользователю ввести количество фотографий, которые он
желает загрузить на сервер, а на втором этапе при помощи скрипта
на сервере сформировать форму с нужным количеством полей ввода.
Однако, используя JavaScript, мы можем облегчить пользователю ввод
информации о себе. Сделать это можно, например, следующим образом:
Пусть, для определённости, пользователю необходимо ввести информацию о
детях, а для упрощения примера - только имя и дату рождения. Со
стороны пользователя нам понадобится браузер, понимающий тэг <span> и
регулярные выражения, поддерживающий функцию getElementById объекта
document, а также понимающий свойство innerHTML, например, Internet
Explorer 4.0+ с установленой поддержкой DHTML (Будьте внимательны, по
умолчанию при установке IE версии ниже 5.5 поддержка 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)
{
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>
результат выполнения браузером вышеуказанного примера выглядит так:
http://www.opennet.dev/soft/js_form.html
Таким образом, мы обнаружили, что использование регулярных выражений в
JavaScript+DHTML открывает нам много новых возможностей для создания
удобного пользовательского интерфейса. В частности, данный приём
используется автором этих строк в интерфейсе администратора своего
сайта (http://dmitry.rsl.ru/) для добавления нескольких картинок к странице
в одной форме.
