Ромка!eu

  • Отдых
  • Работа
Главная — Блоги — Ромка's blog

Это старая (Drupal 6) версия сайта romka.eu. Она больше не обновляется, комментирование материалов отключено. Обновленная версия сайта доступна по адресу http://romka.eu.

Динамическое добавление элементов к форме

Ромка — Ср, 09/17/2008 - 17:02

При разработке модуля Inner poll возникла задача динамического добавления элементов к форме. С помощью библиотеки jQuery эта задача решается в два счета.

Для начала пишем функцию:

<?php
function addInput() {
  
/* default-id — скрытый элемент формы, из которого берется id для первого создаваемого элемента */
  
var id = document.getElementById("default-id").value;
  
id++;
  
/* в форму с именем testform добавляем новый элемент */
  
$("form[name=testform]").append('<div id="div-' + id + '"><input name="input-' + id + '" id="input-' + id + '" value="' + id + '"><a href="javascript:{}" onclick="removeInput(\'' + id + '\')">Удалить</a></div>');
  
/* увеличиваем счетчик элементов */
  
document.getElementById("default-id").value = id;
}
?>

Затем создаем форму:

<?php
<form name="testform" action="test.php" method="POST">
      <
input type="hidden" id="default-id" value="0">
      <
input type="submit" value="Отправить!">
</
form>
<
a href="javascript:{}" onclick="addInput()">Добавить текстовое поле</a><br>
?>

Вот и всё. Здесь размещен работающий пример. Кроме добавления элементов, также приведен пример их удаления.

  • Javascript
  • jquery
  • форма
  • Штуки-дрюки
  • Ромка's blog

Это же jQuery :)

andypost → Пнд, 09/29/2008 - 14:13

Думаю стоит заменить document.getElementById("default-id").value; на родные $("#default-id").val(); или как оно там

JS никто не отменял

Штудер (не проверено) → Втр, 12/30/2008 - 17:46

Не стоит пренебрегать основами. document.getElementById("default-id") работает значительно шустрее.
Я к примеру поклонник jQuery, но если можно обойтись без него (не создав себе гемороя) то именно это я и сделаюю

form[name=testform]

M.Juanito (не проверено) → Втр, 02/03/2009 - 17:03

а если мне нужно добавить строку в fieldset который находится внутри формы. то как переделать эту строку ? $("form[name=testform]").append( ?

создаешь div с айдишником

Anonymous (не проверено) → Пт, 07/29/2011 - 01:48

создаешь div с айдишником "fieldset". в скрипте меняешь на это:
$("div[id=fieldset]").append.....

мало ли, мож еще пригодиться =)

скажите, Роман, а значения из

Anonymous (не проверено) → Втр, 08/25/2009 - 17:29

скажите, Роман, а значения из этих полей передаются нормально в POST?

Да, без проблем передаются.

Ромка → Ср, 08/26/2009 - 18:30

Да, без проблем передаются.

Не получается проверить

Guide (не проверено) → Пт, 08/28/2009 - 11:52

Не получается проверить правильность (например только цифры), при использовании drupal_get_form. То есть вообще по моему друпал на это не рассчитан.

Реферат нивелирование трассы

fred (не проверено) → Ср, 04/21/2010 - 15:11

Реферат нивелирование трассы Реферат по геодезии нивелирование трассы Генрі Хаггард Творчість Генрі Хаггарда Жуль Верн Твори Жуль Верна kapraldr3

спасибо! как-раз то что

Anonymous (не проверено) → Вс, 10/03/2010 - 23:24

спасибо! как-раз то что искал! регистрация ооо спб

А вот и нет, данные из

vit (не проверено) → Ср, 09/23/2009 - 18:34

А вот и нет, данные из динамически созданного инпута передаются на сервер только в эксплорере, в опере и гугл-хроме ничего не передается. В мозиле не пробовал. Похоже, с созданием новых инпутов не все так просто как тут описано :)

А вот и нет

vit (не проверено) → Пт, 09/25/2009 - 10:07

Сори, нашел у себя ошибку (хотя с точки зрения верстки это не была ошибка).
Так что все работает во всех браузерах :). С одной оговоркой. Если поля формы стоят в табличке, то, в аштмл -коде тэги самой формы не должны стоять между тэгами тэйбл и тээр, иначе, работает только в эксплорере.

Заранее извиняюсь за может

Etheriq (не проверено) → Пт, 10/09/2009 - 20:38

Заранее извиняюсь за может быть ламерский вопрос, но не могли бы Вы написать "красивый" способ определения сколько было создано полей ввода и их имена в скрипте-обработчике (test.php).
Спасибо!

var_dump($_POST);

Anonymous (не проверено) → Чт, 12/30/2010 - 02:51

var_dump($_POST);

Баг?

Anonymous (не проверено) → Сб, 11/21/2009 - 05:08

А скажите, пожалуйста. Почему поля отказываются добавляться, если в форме уже находится два или более инпутов? и как такое возможно исправить. Спасибо.

А где функция removeInput

petrik (не проверено) → Чт, 11/26/2009 - 19:32

Все работает, но вот не могу удалить ? ? ?

function removeInput(id)

Anonymous (не проверено) → Пт, 11/27/2009 - 17:08

function removeInput(id) {
$("#div-" + id).remove();
}

о рамблере

ramblike (не проверено) → Пнд, 12/14/2009 - 19:41

Я почему-то все больше и больше начинаю любить Rambler. А вы?

Вопрос

Sanyo (не проверено) → Пнд, 02/15/2010 - 23:18

а где файлик test.php ?
Форму добавления и удаления нашел на примере, а вывод забитых данных не увидел (

И есть ли более новые примеры?

Не получается.

Feniksss89 (не проверено) → Ср, 02/24/2010 - 01:27

Может быть вопрос не по Вашему примеру, но всё же я уже час убил, и не могу найти причины. Я в ссылках "Добавить" и "Удалить" написал class. И вешаю на них обработчики клика $(".addinput").click(function() {...
Для добавления всё работает отлично, но для удаления не работает $(".removeinput").click(function() {... Вот не могу понять почему. Т.е. при загрузке страницы уже прописана ссылка "Добавить" с классом addinput - и это работает. А класс removeinput добавляется. И в чём может быть причина, как считаете?

Динамическое добавлении

Alexandr (не проверено) → Пнд, 03/22/2010 - 11:14

Динамическое добавлении обработчиков событий не работает.
Можно воспользоваться следующим методом:
В <?php$(".addinput").click(function() {...?>, сразу прописывать событие onclick() к добавляемому элементу.
Другие способы ищи в гугле.

Спасибо!

Anonymous (не проверено) → Чт, 04/01/2010 - 14:37

Спасибо!

субтитры к сериалам субтитры

Anonymous (не проверено) → Ср, 04/14/2010 - 13:58

субтитры к сериалам субтитры к сериалам субтитры к фильмам subtitles tv subs конспекты дипломные работы wallpapers tv show wallpapers tv show subtitles tv series subtitles путешествия география movies subtitles seropol5

movies subtitles путешествия

Anonymous (не проверено) → Ср, 04/14/2010 - 13:59

movies subtitles путешествия все о путешествиях tv wallpapers wallpapers seropol5

Реферат по геодезии

fred (не проверено) → Ср, 04/21/2010 - 14:56

Реферат по геодезии нивелирование трассы Реферат нивелирование трассы Творчість Тоніно Гуерра Тоніно Гуерра Твори Астрід Ліндгрен Астрід Ліндгрен kapraldr3

Реферат по геодезии

fred (не проверено) → Ср, 04/21/2010 - 14:57

Реферат по геодезии нивелирование трассы Реферат нивелирование трассы Творчість Тоніно Гуерра Тоніно Гуерра Твори Астрід Ліндгрен Астрід Ліндгрен kapraldr3

более свежие примеры?

Михалыч (не проверено) → Втр, 05/11/2010 - 20:04

А можно увидеть еще более свежие примеры? Честно говоря не очень могу разобраться

Как быть с mysql?

Илья Соловьев → Пт, 07/02/2010 - 20:22

Разобрался, но не могу понять один момент как мне организовать запихивание в БД?
кусочек кода на странице загрузки:

<?php
Загрузить файлы
:<br />
<
p><input name="submit" type="submit" value="Загрузить"></p>
<
input name="file" id="default-id" type="file" value="">
<
input type="hidden" id="default-option-id" value="0"><br />
</
form>
<
a href="javascript:{}" onclick="addInput()">Добавить поле</a>
?>

Я выставил не текстовое поле на добавление, а "загрузку файла" (file)
*Что бы у администратора сайта была функция мультизагрузки картинок подходящих к одному разделу*
Добавил в 4 строке type="file"
<?php
<input  type="file" name="input-' + id + '" id="input-' + id + '" value="' + id + '">
?>

Но не могу понять что передается в action файл формы при добавлении новых полей?
Не могли бы Вы немного разъяснить?

Вопрос новичка. Мне непонятно

Tatiana (не проверено) → Вс, 07/11/2010 - 08:26

Вопрос новичка. Мне непонятно причем тут <?php ?> может надо было ?

<?php<script></script>?>

Tatiana (не проверено) → Вс, 07/11/2010 - 08:29

<?php<script></script>?>

вопрсо по данному скрипту

Anonymous (не проверено) → Втр, 08/10/2010 - 17:17

http://www.romka.eu/blog/dinamicheskoe-dobavlenie-elementov-k-forme

хороший пример!!!
вопрос по нему..
почему не происходит удаления элемента?

сори нащел!!! все в

Anonymous (не проверено) → Втр, 08/10/2010 - 17:27

сори
нащел!!! все в коментах
вопрос снят
отлично все работает

то что не тестировалось - не работает.

free (не проверено) → Ср, 12/01/2010 - 19:50

Пример хороший.
чтобы вставить поле до кнопки отправки, которая обыно является последним элементом формы, нужно снчала кнопку убрать, потом добавить элемент, потом добавить кнопку обратно.

function addInput() {
var id = document.getElementById("default-id").value;
id++;
$("#submit-button").remove(); // удаляем кнопку отправки формы
$("form[name=zakaz]").append('HTML КОД ЭЛЕМЕНТА'); // добавляем нужный элемент
$("form[name=zakaz]").append('HTML КОД КНОПКИ ОТПРАВКИ ФОРМЫ'); // добавляем кнопку обратно

document.getElementById("default-id").value = id;
}

function removeInput(id) {
$("#dd-" + id).remove();
id--; // сохраняем порядок нумерации
document.getElementById("default-id").value = id; // сохраняем порядок нумерации
}

упс! removeInput должен быть

free (не проверено) → Ср, 12/01/2010 - 20:00

упс! removeInput должен быть таким

function removeInput(id) {

$("#dd-" + id).remove();
document.getElementById("default-id").value = document.getElementById("default-id").value - 1;
}

ИМХО ОЧЕНЬ ПРОСТО

Рома Чичин → Чт, 02/10/2011 - 14:58

function add()
{
var list = document.getElementById('list')
var input = document.createElement('input')
input.type="checkbox"
input.id="12"
list.appendChild(input)
}

Мой вариант

Angbor (не проверено) → Пт, 02/11/2011 - 22:16

Сперва - спасибо за хорошую идею.
Выкладываю свой немного поправленный код под сови нужды

<?php
function addInput() {
var 
id = document.getElementById("default-id").value;
  
id++;
$(
"#add_tb").append('<tr id="tr-' + id + '"><td>
<input type="text" onchange="check_change(this)" name="action_date_' 
+ id + '" id="action_date_' + id + '" value="" size="30">
<script type="text/javascript">  
// тут код для вызова календарика jquery-ui-1.8.9.custom.min.js
</script>
<a href="javascript:{}" onclick="removeInput(\'' 
+ id + '\')">УДАЛИТЬ</a></td></tr>');  
document.getElementById("default-id").value = id;
}

function 
removeInput(id) {
 $(
"#tr-"+id).remove();
}
?>

в результате вставляем в таблицу, и каждая новая строка таблицы содержит инпут с уникальным ID и уникальным ID для инпута.

Удаляем опять же строку таблицы - тем самым мы решаем вопрос товарища free о кнопке.
Кнопку помещаем после таблицы, посему не нужно никаких удалений/добавлений

Удаление не должно работать....

Anonymous (не проверено) → Ср, 10/26/2011 - 07:28

Если мы динамически добавляем ссылку, то такая конструкция удаления не будет работать, точнее не должна работать. будет работать если:
ссылку формировать, например с добавлением id и class, при этом используя class как контейнер id:
УДАЛИТЬ
при этом сама функция удаления будет такая:
$(\'#ваше значение\').delegate(\'#udaleniestrok\', \'click\', function(){
var id = $(this).attr(\'class\');
$("#tr"+id).remove();
});

Удаление не должно работать....

Anonymous (не проверено) → Ср, 10/26/2011 - 07:29

Если мы динамически добавляем ссылку, то такая конструкция удаления не будет работать, точнее не должна работать. будет работать если:
ссылку формировать, например с добавлением id и class, при этом используя class как контейнер id:
УДАЛИТЬ
при этом сама функция удаления будет такая:
$(\'#ваше значение\').delegate(\'#udaleniestrok\', \'click\', function(){
var id = $(this).attr(\'class\');
$("#tr"+id).remove();
});

А как отправить

Nikolai (не проверено) → Ср, 10/12/2011 - 03:04

извиняюсь за ламерство но подскажите как данные с массива потом
отправить на почту.

по одному полю я знаю с формы по имени через пост принимаем в переменную которую потом помещаем в тело письма .

$Hear = $_POST['Hear'];
$mailto = "еее.ууу@mail.ru";
$message =
"
INFO:
'бла бла бла' :" .$Hear = $_POST['Hear'];

буду признательный если подскажете

Если мы динамически добавляем

Anonymous (не проверено) → Ср, 10/26/2011 - 07:29

Если мы динамически добавляем ссылку, то такая конструкция удаления не будет работать, точнее не должна работать. будет работать если:
ссылку формировать, например с добавлением id и class, при этом используя class как контейнер id:
УДАЛИТЬ
при этом сама функция удаления будет такая:
$(\'#ваше значение\').delegate(\'#udaleniestrok\', \'click\', function(){
var id = $(this).attr(\'class\');
$("#tr"+id).remove();
});

Если мы динамически добавляем

Anonymous (не проверено) → Ср, 10/26/2011 - 07:30

Если мы динамически добавляем ссылку, то такая конструкция удаления не будет работать, точнее не должна работать. будет работать если:
ссылку формировать, например с добавлением id и class, при этом используя class как контейнер id:
УДАЛИТЬ
при этом сама функция удаления будет такая:
$(\'#ваше значение\').delegate(\'#udaleniestrok\', \'click\', function(){
var id = $(this).attr(\'class\');
$("#tr"+id).remove();
});

немного исправим

Anonymous (не проверено) → Ср, 10/26/2011 - 07:31

Если мы динамически добавляем ссылку, то такая конструкция удаления не будет работать, точнее не должна работать. будет работать если:
ссылку формировать, например с добавлением id и class, при этом используя class как контейнер id:
УДАЛИТЬ
при этом сама функция удаления будет такая:
$(\'#ваше значение\').delegate(\'#udaleniestrok\', \'click\', function(){
var id = $(this).attr(\'class\');
$("#tr"+id).remove();
});

как его использовать

Anonymous (не проверено) → Пнд, 04/09/2012 - 18:51

как его правильно использовать потому что если вставить как есть то пишется ошибка
Parse error: syntax error, unexpected T_VAR in Z:\home\localhost\ssss\ytg.php on line 3

Дело в том что в примере не

free (не проверено) → Втр, 04/10/2012 - 05:08

Дело в том что в примере не правильно написано что это код PHP.
На самом деле это код JavaScript.

И естественно, если Вы вставите его в

<?php

?>

ничего не будет работать.

Обо мне

Всем привет!
Меня зовут
Роман Архаров, я профессиональный веб-разработчик, программирую на языках PHP, Python и Action-Script, в работе использую фреймворки Drupal и Django. В этом блоге я размещаю заметки и статьи, связанные с моей работой, отдыхом и другими интересными мне темами.

Похожие заметки

  • Перетаскивание строк таблицы. Table drag and drop — плагин для jQuery
  • Вращение изображений при помощи Javascript
  • Автоматическая "газетная" верстка (верстка в несколько колонок)
  • Получение заголовков (HTTP-headers) страницы при помощи Java-script
  • Tagnetic — холодильник тэгов

Популярные заметки

  • Авторизация на Drupal-сайте с помощью аккаунта ВКонтакте
  • Перетаскивание строк таблицы. Table drag and drop — плагин для jQuery
  • Темизация Drupal. Часть 3. Основы Drupal Forms API и темизация форм
  • Темизация Drupal. Часть 4. Темизация Views
  • AJAX. Обмен данными между клиентом и сервером, закачка на сервер файлов без перезагрузки страницы при помощи библиотеки jQuery.
  • Кеширование на Drupal-сайте. Сравнение встроенного в Drupal кеша, статического файлового кеша (модуль Boost) и Varnish
  • Тестирование модуля "Inner poll"
  • Несколько панорам из путешествия по Перу и Боливии
  • Arduino + bluetooth, небольшая проблема
  • Пример разработки плагина для модуля CCK

Подписка


Последние комментарии

  • drupal-admin → Кеширование на Drupal-сайте. Сравнение эффективности встроенного в Drupal кеша, статического файлового кеша (модуль Boost) и Var → Отличная статья
  • Меховщиков Руслана → Проверка имени пользователя на наличие букв из разных алфавитов → Re: Читал про это уже на
  • Вероника → Куба. Лето 2008. Часть 3 → По поводу "приветливых жителей" Тринидада
  • Sfero → Статья в PC Magazine/RE. Drupal: разработка модуля → Немного о контенте
  • RemaGe → Статья в PC Magazine/RE. Drupal: разработка модуля → -)
  • Ромка → Статья в PC Magazine/RE. Drupal: разработка модуля → Да, будет сборка, та которую
  • RemaGe → Статья в PC Magazine/RE. Drupal: разработка модуля → -)
  • anatinge → Поездка в Киев → спасибо :)
  • Ромка → Поездка в Киев → Да, в общем-то, ничего
  • GogA → Поездка в Киев → Заинтриговал, что там за

Новые заметки

  • Кеширование на Drupal-сайте. Сравнение встроенного в Drupal кеша, статического файлового кеша (модуль Boost) и Varnish
  • Любопытное поведение модуля syslog в шестом Друпале (баг?)
  • Arduino + bluetooth, небольшая проблема
  • Гугл 1 марта прекратил поддержку сервиса Google Friend Connect
  • Проба пера в HTML5 + canvas. Эффект ластика
  • Шесть рукопожатий
  • Доклад на DrupalConfMoscow 2011
  • Статусы разных сущностей в Друпале 6
  • Футер, прибитый к низу страницы
  • Путешествие по Перу и Боливии. Часть 2

Тэги

Drupal jquery Куба Лето 2007 Лето 2008 Отдых Работа Штуки-дрюки лето модуль статья цитата
еще тэги

Навигация

  • Exchange rate
  • Переход по внешней ссылке
  • Последние сообщения
  • Фотогалереи

Курсы валют

  • 100 Казахстанских тенге — 21,3687 (-0.43)
  • 10 Украинских гривен — 27,2852 (-13.04)
  • 1 Китайский юань — 10,2706 (-40.98)
  • 100 Японских иен — 53,5332 (+12.67)
  • 1 Доллар США — 65,6210 (+33)
  • 1 Евро — 69,8076 (+29.42)
  • 10000 Белорусских рублей — 36,3310 (-2.51)
  • 1 Турецкая лира — 22,9540 (+4.99)

10 случайных заметок

  • Лето 2007. Путешествие в Камбоджу – Таиланд – Малайзию. Часть 3. Камбоджа, Пномпень.
  • Разработал модуль "Адаптивное меню" для Drupal 6
  • Киви не умеют летать?
  • Drupal for Firebug
  • Статья в PC Magazine/RE 11.2009: темизация Drupal
  • Второе имя, middle name
  • Home sheep home
  • Темизация Drupal. Часть 1
  • Доклад на DrupalConfMoscow 2011
  • Статусы разных сущностей в Друпале 6

Случайные фото

Я и разноцветные рыбы
Норвегия, Нордсетер
Это лыжники. В мае. На улице +20.
Замок Акерхус вечером
Судак, Генуэзская крепость
Экзотическое меню в аэропорту :))
Копенгаген, Кристиания, Граффити 7
Взгляд в будущее
Море
Автописта
Оденсе
Вид на Осло из замка Акерхус
Тринидадские спортсменчики
Радуга над футбольным полем в Лужниках
В пути
Дерево в Прамбанане
  • Отдых
  • Работа

При использовании материалов с сайта, пожалуйста, ставьте ссылку на источник. E-mail для связи: mne@romka.eu.