MZero #6
Меню
  Главная
  Авторам
  Конкурс
  Разделы
  Команда Zero
  Клуб ICQ
HiTech
  RobotPHONE: медвежьи услуги в реальном времени .
  Круглый астронавт стремится на космическую станцию.
  Квантовые компьютеры: серьезный прорыв в разработках.
  Космос для чайников.
Моддинг
  Подставка для CD.
  Подсветка кнопок джойстика.
  Знак вопроса (украшение лицевой панели) .
  Оформляем блоухол.
Mobile
  В США хотят запретить привязку мобильных телефонов к операторам.
  Секреты Nokia 6110.
  Если у вас украли мобильный телефон.
  Мобильный телефон и электронная почта.
  Покупаем аккумулятор. Дружеские советы.
Windows
  Windows 98. Агент сжатия.
  Кто поможет разогнать ваш windows?
Пингвин'zzz
  Учебник по Unix для начинающих.
  О Linux.
  Linux ХОЧУ.
Интернет - программинг
  Как написать гостевую книгу.
  Динамическое изменение HTML форм.
  Защита от hotlinking.
Интернет - design
  Что такое стильный web-сайт?
  Шрифтовое оформление в web-дизайне.
  Новогодняя открытка.
Интернет - сайт
  Обзор софт-каталогов рунета.
  mult.ru
Жизнь в сети
  Загнать за 24 часа.
  Sapphire дурачит покупателей видеокарт.
  Миф о сетевой безопасности и его разоблачение.
Софт
  Opera открыла платный прокси-сервер для мобильных устройств.
  Настраиваем почтовую программу.
  Обзор.
Чтиво
  Книги о Порри Гаттере подарят бесплатным онлайновым библиотекам.
  НОЧНОЙ ДОЗОР.
Games
  Реальный Counter-Strike: англичане и немцы строят карту de_dust .
  Far Cry.
  Painkiller.
  Сибирь 2.
  Cheats.
Интервью
  Тина Канделаки: я поправляюсь даже от вида еды.
  Интервью с Дэниэлом Рэдклиффом.
Музыка
  Пол Маккартни: сейчас я траву не курю.
  Мадонна: Буш и Саддам похожи друг на друга.
  Дженнифер Лопес "вышла замуж".
Стиль
  Модные стрижки нового сезона.
  Имидж для Тебя.
Здоровье
  Фитнес для Тебя: как выбрать свою программу?
www.mzero.by.ru
Содержание

Динамическое изменение 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


Copyright by MZERO
Копирование и использование данных материалов разрешается
только в случае указания на журнал "
MZERO", как на источник получения информации.
При этом во всех ссылках обязательно явное указание адреса вэб-сайта
www.mzero.by.ru.
Журнал тестировался на IE 5.0/6.0.