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

Question

提交使用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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 13

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

破碎:

table
  form

工作:

form
  table

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

Answer 2

Sco*_*den 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>

Run Code Online (Sandbox Code Playgroud)

单击“添加选项”两次，您将得到

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

归档时间：	17 年，1 月前
查看次数：	16408 次
最近记录：	11 年，4 月前