11

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

我制作了向表单添加新输入字段的 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

4 回答 4

13

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

破碎的：

桌子
  形式

在职的：

形式
  桌子

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

于 2009-01-10T04:45:20.277 回答
4

您的代码可以正常工作：

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

单击两次添加选项，您将获得

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

于 2008-11-23T15:54:16.603 回答
2

你确定你在这里没有犯任何错误吗？

我将您的代码复制到一个新页面中，并将以下代码添加到 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
于 2008-11-23T15:31:33.543 回答
0

您始终可以使用 javascript 函数自己序列化表单，然后提交（使用 AJAX 或 get 请求或其他东西）。
http://malsup.com/jquery/form/comp/

于 2008-11-23T15:28:50.007 回答