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

Submitted by Ромка on Ср, 17/09/2008 - 17:02

Ромка аватар

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

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

  1. function addInput() {
  2. /* default-id — скрытый элемент формы, из которого берется id для первого создаваемого элемента */
  3. var id = document.getElementById("default-id").value;
  4. id++;
  5. /* в форму с именем testform добавляем новый элемент */
  6. $("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>');
  7. /* увеличиваем счетчик элементов */
  8. document.getElementById("default-id").value = id;
  9. }

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

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

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

43 Comments

Это же jQuery :)

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

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

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

form[name=testform]

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

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

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

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

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

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

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

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

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

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

А вот и нет

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

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

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

Баг?

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

function removeInput(id)

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

Вопрос

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

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

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

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

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

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

Спасибо!

Спасибо!

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

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

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

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

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

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

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

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

Как быть с mysql?

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

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

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

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

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

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

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

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

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

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

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

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; // сохраняем порядок нумерации
}

Мой вариант

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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