The OpenNET Project / Index page

[ новости /+++ | форум | теги | ]

Создание динамических форм с помощью JavaScript (html javascript form)


<< Предыдущая ИНДЕКС Поиск в статьях src Установить закладку Перейти на закладку Следующая >>
Ключевые слова: html, javascript, form,  (найти похожие документы)
From: Дмитрий Верещака <dmitry@rsl.ru> Newsgroups: email Date: Mon, 28 Jul 2003 14:31:37 +0000 (UTC) Subject: Создание динамических форм с помощью JavaScript Создание динамических форм с помощью JavaScript Очень часто при создании HTML-форм возникает потребность узнать у пользователя значения однотипных параметров, количество которых заранее неизвестно. Например, если это форма добавления сообщения в форум с возможностью прикрепить один или несколько файлов, например, с фотографиями. Другим примером может служить форма с анкетой, в которой есть сведения о детях. И в том и другом случае невозможно заранее предположить количество полей, которые пожелает заполнить посетитель сайта. Без использования JavaScript эту задачу можно решить двумя путями: 1. Ограничить количество полей ввода каким-либо максимально разумным числом. Например, количество людей, у которых число детей больше 5, относительно невелико. Однако этот способ несколько некрасивый - во-первых, мы изначально загромождаем форму большим числом полей ввода, причём, большинству пользователей понадобятся от силы два - три первых, а во-вторых, мы всё-таки ограничиваем пользователя в возможности указать полную информацию о себе - так, если форму пожелает заполнить человек, у которого 10 сыновей, то некоторыми из них ему придётся пожертвовать. 2. Осуществлять ввод информации поэтапно. Например, на первом этапе предложить пользователю ввести количество фотографий, которые он желает загрузить на сервер, а на втором этапе при помощи скрипта на сервере сформировать форму с нужным количеством полей ввода. Однако, используя JavaScript, мы можем облегчить пользователю ввод информации о себе. Сделать это можно, например, следующим образом: Пусть, для определённости, пользователю необходимо ввести информацию о детях, а для упрощения примера - только имя и дату рождения. Со стороны пользователя нам понадобится браузер, понимающий тэг <span> и регулярные выражения, поддерживающий функцию getElementById объекта document, а также понимающий свойство innerHTML, например, Internet Explorer 4.0+ с установленой поддержкой DHTML (Будьте внимательны, по умолчанию при установке IE версии ниже 5.5 поддержка DHTML отключена), Konqueror 2.2+, Netscape 6, Mozilla начиная с M16. Оформим ту часть формы, которая содержит информацию о детях, в виде таблицы. В самой первой строке таблицы мы разместим названия столбцов и добавим ещё одну ячейку, в которой разместим ссылку на добавление ещё одной строки с полями ввода информации. Во второй строке таблицы мы разместим сами поля ввода информации плюс ячейку со ссылкой на удаление строки с информацией. Чтобы можно было отличить строку данных от строки названий, добавим в тэг <tr> параметр id="newline" и номер строки в квадратных скобках (чтобы было легче отличить номер строки от символа 0) nomer="[0]". Затем поместим всю таблицу во внутрь тэга span с каким-либо именем, например, table. В итоге у нас должно получиться что-то вроде следующего HTML-кода: <span id="table"> <table border=0 cellspacing=0 cellpadding=3> <caption>Сведения о детях</caption> <tr><td>Имя</td><td>Дата рождения</td><td> <a href="#" onclick="return addline();">добавить</a></td></tr> <tr id="newline" nomer="[0]"> <td><input type="text" name="name[0]"></td><td><input type="text" name="date[0]"></td> <td valign="top"><a href="#" onclick="return rmline(0);">удалить</td></tr></table> </span> Чтобы вся эта конструкция заработала, необходимо еще написать две функции на JavaScript: добавление новой строки и удаление ошибочно добавленной строки. Причём, в данном примере предполагается, что количество строк с данными может быть и нулевым, кроме того, у данной реализации динамической формы есть недостаток: если удалить все строки, то добавить строки уже будет нельзя. <script> var c=0; //счётчик количества строк function addline() { c++; // увеличиваем счётчик строк s=document.getElementById('table').innerHTML; // получаем HTML-код таблицы s=s.replace(/[\r\n]/g,''); // вырезаем все символы перевода строк re=/(.*)(<tr id=.*>)(<\/table>)/gi; // это регулярное выражение позволяет выделить последнюю строку таблицы s1=s.replace(re,'$2'); // получаем HTML-код последней строки таблицы s2=s1.replace(/\[\d+\]/gi,'['+c+']'); // заменяем все цифры к квадратных скобках // на номер новой строки s2=s2.replace(/(rmline\()(\d+\))/gi,'$1'+c+')'); // заменяем аргумент функции rmline на номер новой строки s=s.replace(re,'$1$2'+s2+'$3'); // создаём HTML-код с добавленным кодом новой строки document.getElementById('table').innerHTML=s; // возвращаем результат на место исходной таблицы return false; // чтобы не происходил переход по ссылке } function rmline(q) { s=document.getElementById('table').innerHTML; s=s.replace(/[\r\n]/g,''); re=new RegExp('<tr id="?newline"? nomer="?\\['+q+'.*?<\\/tr>','gi'); // это регулярное выражение позволяет выделить строку таблицы с заданным номером s=s.replace(re,''); // заменяем её на пустое место document.getElementById('table').innerHTML=s; return false; } </script> результат выполнения браузером вышеуказанного примера выглядит так: http://www.opennet.dev/soft/js_form.html Таким образом, мы обнаружили, что использование регулярных выражений в JavaScript+DHTML открывает нам много новых возможностей для создания удобного пользовательского интерфейса. В частности, данный приём используется автором этих строк в интерфейсе администратора своего сайта (http://dmitry.rsl.ru/) для добавления нескольких картинок к странице в одной форме.

<< Предыдущая ИНДЕКС Поиск в статьях src Установить закладку Перейти на закладку Следующая >>

Обсуждение [ RSS ]
  • 1.1, kornel (?), 15:42, 28/07/2003 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    У меня глюки или после удаления последнего элемента добавление не работает.
    IE6
     
  • 1.4, Morf (?), 12:43, 23/04/2007 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    А как сделать чтобы не более 10 таких форм добавлялось
     
  • 1.5, Morf (?), 13:52, 23/04/2007 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    ещё вопрос а как вытаскивать эти данные
     
  • 1.6, Morf (?), 18:06, 24/04/2007 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    у меня есть ещё вопрос а как заполнить несколько таких форм
     
  • 1.8, Умпутшо (?), 17:54, 10/04/2008 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    а как сделать, чтобы при добавлении сторки старая инфа не терялась? ;)
     
  • 1.10, Дмитрий (??), 16:04, 16/05/2010 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    Как сделать так, чтобы информация, которую добавили,после закрытия сайта , оставалась на нем и отображалась при новой сессии?))
     
  • 1.11, Adil (??), 16:03, 27/10/2015 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    e22
     
  • 1.12, Никита Решетов (?), 13:28, 25/11/2020 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    77
     
  • 1.13, BL0ODXDROWN (?), 00:06, 25/03/2021 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    11
     

    игнорирование участников | лог модерирования

     Добавить комментарий
    Имя:
    E-Mail:
    Заголовок:
    Текст:




    Партнёры:
    PostgresPro
    Inferno Solutions
    Hosting by Hoster.ru
    Хостинг:

    Закладки на сайте
    Проследить за страницей
    Created 1996-2024 by Maxim Chirkov
    Добавить, Поддержать, Вебмастеру