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

【问题标题】：Submit form input fields added with javascript提交使用 javascript 添加的表单输入字段
【发布时间】：2010-09-23 16:18:13
【问题描述】：

我正在制作一个简单的表单来创建投票，因此我希望可以添加额外的输入字段，以防用户想要在投票中获得更多选项。

我已经编写了向表单添加新输入字段的 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 form-submit

【解决方案1】：

我刚刚调试了遇到类似问题的网站。对我来说，结果是我的表格和表单标签的“错误”顺序导致了这个问题。

破碎：

桌子形式

工作：

形式桌子

这指出了一些非常重要的事情。浏览器可能会很好地呈现，并且表单可能会正常工作，使用格式错误的 html，但是您仍然可以通过没有正确格式化的 html 来破坏事情，像这样。也许我应该开始使用 mod_tidy！

【讨论】：

我没有意识到这会产生这样的效果，这对我有用。非常感谢：D
你先生是个英雄。谢谢你拯救了我的千年。
同上！让我免于拔头发！
它对我有用，但我真的很想知道你是如何解决这个问题的。

【解决方案2】：

您的代码可以正常工作：

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

点击两次添加选项，你得到

数组（[投票] => 数组（[问题] => [选项1] => [选项2] => [选项3] => [选项4] =>））

【讨论】：

【解决方案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 或 get 请求或其他方式）。
http://malsup.com/jquery/form/comp/

【讨论】：