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

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

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

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

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;
}

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

<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>

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

43 Comments

Это же jQuery :)

Submitted by andypost on Пнд, 29/09/2008 - 14:13

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

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

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

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

form[name=testform]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

А вот и нет

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

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

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

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

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

var_dump($_POST);

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

var_dump($_POST);

Баг?

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

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

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

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

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

function removeInput(id)

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

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

о рамблере

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

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

Вопрос

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

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

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

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

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

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

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

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

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

Спасибо!

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

Спасибо!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как быть с mysql?

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

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

Загрузить файлы:<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"

<input  type="file" name="input-' + id + '" id="input-' + id + '" value="' + id + '">

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

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

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

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

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

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

<script></script>

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

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

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

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

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

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

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

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

Submitted by free (не проверено) on Ср, 01/12/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 должен быть

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

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

function removeInput(id) {

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

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

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

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

Мой вариант

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

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

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 о кнопке.
Кнопку помещаем после таблицы, посему не нужно никаких удалений/добавлений

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

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

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

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

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

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

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

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

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

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

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

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

<?php

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

43 Comments

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

Вход для пользователей