提交使用javascript添加的表单输入字段

I'm making a simple form to create polls, therefore I want the possibility to add additional input fields in case the user wants more options in the poll.

我正在创建一个简单的表单来创建民意调查,因此我希望有可能添加其他输入字段,以防用户在民意调查中需要更多选项。

I've made Javascript code that adds a new input field to the form, but the dynamically added input fields are not posted when the form is submitted (I use a standard submit button).

我已经制作了向表单添加新输入字段的Javascript代码,但是在提交表单时不会发布动态添加的输入字段(我使用标准的提交按钮)。

Is there some way to get the dynamically added fields posted/recognized as a part of the form?

有没有办法让动态添加的字段作为表单的一部分发布/识别?

<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 个解决方案

#1

Your code works fine as is:

您的代码工作正常:

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

click Add Option twice and you get

单击添加选项两次,你得到

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

数组([poll] =>数组([问题] => [选项1] => [选项2] => [选项3] => [选项4] =>))

#2

I just debugged my site where I was having a similar issue. For me it turned out that having my table and form tags in the "wrong" order caused the issue.

我刚调试了我的网站,我遇到了类似的问题。对我来说,事实证明,以“错误”的顺序使我的表格和表格标签导致了这个问题。

Broken:

table
  form

Working:

form
  table

This points out something pretty important. The browser may render fine, and the form may work fine, with malformed html, but you can still break things, like this, by having not having properly formatted html. Maybe I should start using mod_tidy!

这指出了一些非常重要的东西。浏览器可以呈现正常,并且表单可能工作正常,格式错误的html,但你仍然可以通过没有正确格式化的html来破坏这样的东西。也许我应该开始使用mod_tidy!

#3

Are you sure you are not making any mistake here ?

你确定你在这里没有犯错吗?

I copied your code in a new page and added the following to the code behind of an ASP.NET page (it should work on any framework):

我在新页面中复制了您的代码,并将以下内容添加到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 />");
        }
    }
}

I added additional fields and entered test values, the output clearly shows all dynamic input fields posted back to the server.

我添加了其他字段并输入了测试值,输出清楚地显示了发回服务器的所有动态输入字段。

Here is the output:

这是输出:

poll[question]  test1
poll[option1]  test2
poll[option2]  test3
poll[option3]  test4
poll[option4]  test5
poll[option5]  test6
poll[option6]  test7

#4

You can always serialize the form yourself using a javascript function and then submit that (using AJAX or a get request or something).
http://malsup.com/jquery/form/comp/

您始终可以使用javascript函数自行序列化表单,然后提交(使用AJAX或get请求等)。 http://malsup.com/jquery/form/comp/

#1