Динамическое изменение HTML форм

Практически на всех Web - сайтах применяются HTML формы для сбора информации о посетителях, клиентах. На коммерческих сайтах, реализующих Интернет-магазины, столы заказов, почтовые рассылки и прочие действия, где требуется ввод информации от пользователя, формы являются основными функциональными элементами сайта, остальные 90 процентов заполнения сайта - мишура, которая предназначена для завлечения клиента, чтобы он заполнил форму и нажал кнопку "Submit".

Часто формы используются для администрирования сайтов, форумов, чатов, баз данных и для прочих нужд. Также часто нужно в форме вводить довольно много однотипной информации, например при заполнении какой-нибудь базы данных.

При этом, обычно предлагают ввести запись, нажать кнопку "Записать", затем информация передается на сервер, там обрабатывается, с сервера возвращается подтверждение об успешном сохранении данных, и снова передаетсяновая форма. Даже при хорошей связи (ping = 100 ms) время обработки формы может достигать t=20-30 секунд. Если вы заполнили форму один раз, и больше не собираетесь этого делать, время сполне удовлетворительно, но если вам нужно ввести num= 20-30 записей , то придется ждать SumT=(t*num)+(t_filling_form*n).

Не лучше ли заполнить за один раз 20-30 записей и сохранить? Лучше. Но сколько точно записей нужно? Это неизвестно. Тогда придется прибегнуть к возможностям Dynamic HTML + JavaScript для написания динамической формы.

<form name="links" method="post"><>
<table id="tbl">
<tr>
<td><input type="text" name="name" width="60"></td>
<td><input type="text" name="URL" width="60"></td>
<td><input type="text" name="category" width="30"></td>
</tr>
</table>
<td><input type="submit"></td>
<td><input type="reset"></td>
</form>

А теперь попробуем немного разобраться в нашей страничке с точки зрения браузера (речь идет об IE 4.X и выше).

document.all.identifier.property

Если вы заметили, в листинге выше тэгу <table> присвоен идентификатор tbl. С его помощью в дальнейшем можно обращаться к таблице, как document.all.tbl.properties . properties, как вы уже догадались, свойства элемента, вместо них может быть вызов метода.

Таблица в HTML состоит из строк, каждая строка - из ячеек. Ячейки (как и любой другой элемент HTML страницы) является контейнером для HTML кода, к которому можно доступится путем чтения/записи свойства innerHTML. Значит, добавив строку, ячейки, можно прописать в них нужное нам содержимое. Добавляется строка в таблицу методом

insertRow(номер_строки); // добавляется строка
insertCell(номер_ячейки); // добавляется ячейка. Это уже метод объекта row

<SCRIPT language = 'JavaScript'>
var numb;
numb = 1; // переменная для формирования идентификатора элемента
function add_new_row() {
    var currrow;
    currow = document.all.tbl.rows.length; // вычислить количество строк в таблице
    numb++;
    document.all.tbl.insertRow(currow); // добавляем строку в таблицу
    document.all.tbl.rows[currow].insertCell(0); // добавляем ячейки
    document.all.tbl.rows[currow].insertCell(1);
    document.all.tbl.rows[currow].insertCell(2);
	document.all.tbl.rows[currow].insertCell(2);
 // вставляем в форму поля
    document.all.tbl.rows[currow].cells[0].innerHTML =
	 '<input type=\"text\" name=\"name_'+ numb +'\">';
    document.all.tbl.rows[currow].cells[1].innerHTML =
	 '<input type=\"text\" name=\"url_'+ numb+'\">';
    document.all.tbl.rows[currow].cells[2].innerHTML =
	 '<input type=\"text\" name=\"category_'+ numb+'\">';
 // кнопка для вызова функции для добавления следующей строки
    document.all.tbl.rows[currow].cells[3].innerHTML =
     '<input type=button name=\"btnNext\" value=\"+\" onClick=\"add_new_row()\">';
}
</SCRIPT>

При нажатии на кнопку "+" добавляется новая строка, и можно заполнять форму столько, сколько требуется, и затем одним нажатием кнопки Submit отправить все данные на сервер.