Отправить поля ввода формы, добавленные с помощью 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>

Ответы

Ответ 1

Ваш код работает отлично, как есть:

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

Дважды нажмите "Добавить вариант", и вы получите

Array ([poll] = > Array ([question] = > [option1] = > [option2] = > [option3] = > [option4] = > ))

Ответ 2

Я только что отладил мой сайт, где у меня была аналогичная проблема. Для меня оказалось, что наличие таблиц и форм в "неправильном" порядке вызвало проблему.

Брокен:

table
  form

В:

form
  table

Это указывает на что-то очень важное. Браузер может выглядеть отлично, и форма может работать нормально, с искаженным html, но вы все равно можете сломать вещи, например, не имея должным образом отформатированный html. Может быть, я должен начать использовать mod_tidy!

Ответ 3

Вы уверены, что не ошибаетесь здесь?

Я скопировал ваш код на новой странице и добавил следующий код в код страницы 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 + "&nbsp;&nbsp;" + 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

Ответ 4

Вы всегда можете сериализовать форму самостоятельно с помощью javascript-функции, а затем отправить ее (используя AJAX или запрос на получение или что-то еще).
http://malsup.com/jquery/form/comp/