СтатьиСоздание динамических форм с помощью JavaScriptОчень часто при создании HTML-форм возникает потребность узнать у пользователя значения однотипных параметров, количество которых заранее неизвестно. Например, если это форма добавления сообщения в форум с возможностью прикрепить один или несколько файлов, например, с фотографиями. Другим примером может служить форма с анкетой, в которой есть сведения о детях. И в том и другом случае невозможно заранее предположить количество полей, которые пожелает заполнить посетитель сайта. Без использования JavaScript эту задачу можно решить двумя путями:
Однако, используя JavaScript, мы можем облегчить пользователю ввод информации о себе. Пусть, для определённости, пользователю необходимо ввести информацию о детях, а для упрощения примера — только имя и дату рождения. Со стороны пользователя нам понадобится браузер, понимающий тэг
Оформим ту часть формы, которая содержит информацию о детях, в виде таблицы. В самой первой строке таблицы мы разместим названия столбцов и добавим ещё одну ячейку, в которой разместим ссылку на добавление ещё одной строки с полями ввода информации. Во второй строке таблицы мы разместим сами поля ввода информации плюс ячейку со ссылкой на удаление строки с информацией. Чтобы можно было отличить строку данных от строки названий, добавим в тэг <tr> параметр id="newline" и номер строки в квадратных скобках (чтобы было легче отличить номер строки от символа В итоге у нас должно получиться что-то вроде следующего 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> Результат выполнения браузером вышеуказанного примера выглядит так:
Автор: Дмитрий Верещака |
||||||||