Отправить поля ввода формы, добавленные с помощью JavaScript - PullRequest
Новая
       14

Отправить поля ввода формы, добавленные с помощью JavaScript

11 голосов
/ 23 ноября 2008

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

Я создал код 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>

Ответы [ 4 ]

13 голосов
/ 10 января 2009

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

Поврежденная: 

table
  form

Рабочая: 

form
  table

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

4 голосов
/ 23 ноября 2008

Ваш код работает нормально, как: 

<?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 ([опрос] => Массив ([вопрос] => [опция1] => [опция2] => [опция3] => [опция4] =>))

2 голосов
/ 23 ноября 2008

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

Я скопировал ваш код на новую страницу и добавил следующий код в код страницы 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
0 голосов
/ 23 ноября 2008

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

...