Клуб программистов "Весельчак У" - Создание динамических форм с помощью JavaScript
ГЛАВНАЯ СТАТЬИ ЧАВО КОНТАКТЫ ПОИСК
параметр id="newline" и номер строки в квадратных скобках (чтобы было легче отличить номер строки от символа 0) nomer="[0]". Затем поместим всю таблицу во внутрь тэга span с каким-либо именем, например, table. И напоследок, добавим еще поле ввода типа hidden для того, чтобы считать строки таблицы. В итоге у нас должно получиться что-то вроде следующего HTML-кода:
новости

Наш сайт поздравляет всех с Новым Годом! Желаем вам всего самого лучшего и много много хорошего в Новом 2010 году.
Администрация.


В связи с дырой в старом движке форума все переезжает на новый движок. Прошу прощения за неудобcтва...


Свершилось!
Сайт переехал на свой собственный выделенный сервер!

личный кабинет
онлайн
счетчики



Яндекс цитирования



Создание динамических форм с помощью JavaScript
Очень часто при создании HTML-форм возникает потребность узнать у пользователя значения однотипных параметров, количество которых заранее неизвестно. Например, если это форма добавления сообщения в форум с возможностью прикрепить один или несколько файлов, например, с фотографиями. Другим примером может служить форма с анкетой, в которой есть сведения о детях. И в том и другом случае невозможно заранее предположить количество полей, которые пожелает заполнить посетитель сайта. Без использования JavaScript эту задачу можно решить двумя путями: 1. Ограничить количество полей ввода каким-либо максимально разумным числом. Например, количество людей, у которых число детей больше 5, относительно невелико. Однако этот способ несколько некрасивый - во-первых, мы изначально загромождаем форму большим числом полей ввода, причём, большинству пользователей понадобятся от силы два - три первых, а во-вторых, мы всё-таки ограничиваем пользователя в возможности указать полную информацию о себе - так, если форму пожелает заполнить человек, у которого 10 сыновей, то некоторыми из них ему придётся пожертвовать. 2. Осуществлять ввод информации поэтапно. Например, на первом этапе предложить пользователю ввести количество фотографий, которые он желает загрузить на сервер, а на втором этапе при помощи скрипта на сервере сформировать форму с нужным количеством полей ввода. Однако, используя JavaScript, мы можем облегчить пользователю ввод информации о себе. Сделать это можно, например, следующим образом: Пусть, для определённости, пользователю необходимо ввести информацию о детях, а для упрощения примера - только имя и дату рождения. Со стороны пользователя нам понадобится браузер, понимающий тэг и регулярные выражения, поддерживающий функцию getElementById объекта document, а также понимающий свойство innerHTML, например, Internet Explorer 5.5 Оформим ту часть формы, которая содержит информацию о детях, в виде таблицы. В самой первой строке таблицы мы разместим названия столбцов и добавим ещё одну ячейку, в которой разместим ссылку на добавление ещё одной строки с полями ввода информации. Во второй строке таблицы мы разместим сами поля ввода информации плюс ячейку со ссылкой на удаление строки с информацией. Чтобы можно было отличить строку данных от строки названий, добавим в тэг
Сведения о детях
ИмяДата рождениядобавить
удалить
Чтобы вся эта конструкция заработала, необходимо еще написать две функции на JavaScript: добавление новой строки и удаление ошибочно добавленной строки. Причём, в данном примере предполагается, что количество строк с данными может быть и нулевым, кроме того, у данной реализации динамической формы есть недостаток: если удалить все строки, то добавить строки уже будет нельзя. Таким образом, мы обнаружили, что использование регулярных выражений в JavaScript+DHTML открывает нам много новых возможностей для создания удобного пользовательского интерфейса. В частности, данный приём используется автором этих строк в интерфейсе администратора своего сайта для добавления нескольких картинок к странице в одной форме.




Комментарии отсутствуют
дополнительно
рассылки
опрос

Как Вы нашли наш сайт?

Через поисковик
По ссылке с другого сайта
По рекомендации
Не помню


Результаты
Все опросы

канал IRC
Внимание:
Действует чат на канале IRC.
Для подключения используйте следующие настройки:
Сервер - irc.rinet.ru или irc.baikal.net
Порт - 6669.
Канал - #Shelek.
© "Весельчак У"
email:club@shelek.com