Web Creation - еженедельный сетевой журнал для вебмастеров

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

Автор: Alexander Suhhinin
Информация взята с сайта shurick31.narod.ru

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

Вся информация, введенная в форму, передается специальной программе на сервере, где она обрабатывается, и результат возвращается на машину клиента в виде HTML страницы.

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

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

Довольно долго.

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

Предположим, что нам нужно внести в каталог ссылок на нашей домашней странице новую пачку линков. Сколько их, мы не знаем, может одну, а может десяток.
В каталогое сохраняется такая информация:
  • Наименование ссылки
  • URL
  • Категория ссылки
т.е. нам нужны всего 3 поля для заполнения формы. В самом простом случае форма выглядит так:
<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, который содержит все остальные элементы странцы. В языке JavaScript так и принято обращаться к элементам:
document.all.identifier.property
, где identifier - идентификатор элемента.

Если вы заметили, в листинге выше тэгу <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 отправить все данные на сервер.

Автор: Alexander Suhhinin
Информация взята с сайта shurick31.narod.ru

© журнал принадлежит Web Creation
по всем вопросам обращаться А. Кузьмин