Динамическое добавление элементов к форме
Ромка — Ср, 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>
?>
Вот и всё. Здесь размещен работающий пример. Кроме добавления элементов, также приведен пример их удаления.
Это же 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:51var_dump($_POST);
Баг?
Anonymous (не проверено) → Сб, 11/21/2009 - 05:08А скажите, пожалуйста. Почему поля отказываются добавляться, если в форме уже находится два или более инпутов? и как такое возможно исправить. Спасибо.
А где функция removeInput
petrik (не проверено) → Чт, 11/26/2009 - 19:32Все работает, но вот не могу удалить ? ? ?
function removeInput(id)
Anonymous (не проверено) → Пт, 11/27/2009 - 17:08function 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:59movies 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:17http://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:58function 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
?>
ничего не будет работать.