Динамическое изменение HTML форм.
Практически на всех 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
Источник: www.shurick31.narod.ru
|