Поля ввода формы отправки добавлены с помощью javascript
Я делаю простую форму для создания опросов, поэтому мне нужна возможность добавлять дополнительные поля ввода на случай, если пользователю нужно больше параметров в опросе.
Я создал код Javascript, который добавляет в форму новое поле ввода, но динамически добавленные поля ввода не публикуются при отправке формы (я использую стандартную кнопку отправки).
Есть ли способ опубликовать / распознать динамически добавляемые поля как часть формы?
<form id = "myForm" method = "post">
<input type = "submit">
<input type = "text" name = "poll[question]">
<input type = "text" name = "poll[option1]">
<input type = "text" name = "poll[option2]">
</form>
<a href = "javascript:addOption();">Add option</a>
<script>
var optionNumber = 3; //The first option to be added is number 3
function addOption() {
var theForm = document.getElementById("myForm");
var newOption = document.createElement("input");
newOption.name = "poll[option"+optionNumber+"]"; // poll[optionX]
newOption.type = "text";
theForm.appendChild(newOption);
optionNumber++;
}
</script>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Вы всегда можете сериализовать форму самостоятельно, используя функцию javascript, а затем отправить ее (используя AJAX или запрос на получение или что-то еще). http://malsup.com/jquery/form/comp/
Вы уверены, что не ошибаетесь здесь?
Я скопировал ваш код на новую страницу и добавил следующее к коду страницы ASP.NET (он должен работать на любой платформе):
protected void Page_Load(object sender, EventArgs e)
{
foreach (string p in this.Request.Params.Keys) {
if (p.StartsWith("poll")) {
Response.Write(p + " " + this.Request.Params[p] + "<br />");
}
}
}
Я добавил дополнительные поля и ввел тестовые значения, на выходе четко отображаются все динамические поля ввода, отправленные обратно на сервер.
Вот результат:
poll[question] test1
poll[option1] test2
poll[option2] test3
poll[option3] test4
poll[option4] test5
poll[option5] test6
poll[option6] test7
Ваш код отлично работает как есть:
<?php
print_r($_REQUEST)
?>
<html>
<body>
<form id = "myForm" method = "post">
<input type = "submit">
<input type = "text" name = "poll[question]">
<input type = "text" name = "poll[option1]">
<input type = "text" name = "poll[option2]">
</form>
<a href = "javascript:addOption();">Add option</a>
<script>
var optionNumber = 3; //The first option to be added is number 3
function addOption() {
var theForm = document.getElementById("myForm");
var newOption = document.createElement("input");
newOption.name = "poll[option"+optionNumber+"]"; // poll[optionX]
newOption.type = "text";
theForm.appendChild(newOption);
optionNumber++;
}
</script>
</body>
</html>
дважды щелкните Добавить параметр, и вы получите
Массив ([опрос] => Массив ([вопрос] => [option1] => [option2] => [option3] => [option4] =>) »
Я только что отладил свой сайт, на котором у меня была аналогичная проблема. Для меня выяснилось, что причиной проблемы было то, что мои теги таблицы и формы были расположены в «неправильном» порядке.
Сломанный:
table form
Работающий:
form table
Это указывает на кое-что очень важное. Браузер может нормально отображаться, и форма может нормально работать с искаженным html, но вы все равно можете что-то сломать, не отформатировав html должным образом. Может мне стоит начать использовать mod_tidy!
Вы, сэр, герой. Спасибо, что спас мою тысячу лет.
То же самое! Спас меня от выдергивания волос!
У меня это сработало, но мне действительно интересно, как вы вообще решили эту проблему.
Я не понимал, что это может иметь такой эффект, у меня это сработало. Большое спасибо: D