jquery+html+php如何创建动态表单？答案

【问题标题】：How to create a dynamic form in jquery+html+php?jquery+html+php如何创建动态表单？
【发布时间】：2016-10-08 21:14:10
【问题描述】：

对于一个项目，我需要生成一个动态 html 表单，该表单将通过 ACTION 字段将 POST 信息发送到 PHP 页面。

表单不必是静态的，它必须是动态的，因此用户必须能够生成（添加）不固定（动态）数量的输入标签，然后当所有输入都生成并填充用户可以点击提交按钮并将所有信息通过post发送到一个php文档。

我完全迷路了

我一直在使用生成输入的这段代码，但我无法通过 post 将数据发送到 php 文件

     <script>
var choices=[];
choices[0]="one";
choices[1]="two";

function addInput(divName){
    var newDiv=document.createElement('div');
    newDiv.innerHTML="<input type='text'>";

    newDiv.innerHTML=newDiv.innerHTML+"</input>";
    document.getElementById(divName).appendChild(newDiv);
}
</script>
<form class="new" method="post" action="action.php">
    <div id="dynamicInput">
    </div>
    <input type="button" value="Add" onclick="addInput('dynamicInput');" />
    <input type="button" value="Save" />

</form>

【问题讨论】：

标签： php jquery html

【解决方案1】：

要提交表单，一种可能的方案是更改要提交的保存按钮的类型：
<input type="submit" value="Save" />
还将name 属性添加到自动生成的输入中。否则您将无法访问提交的 $_POST 数据：
<input name="enter_name[]" type='text'>
如您所见，我将[] 连接到输入字段。这会将所有提交的数据转换为一个数组。否则，最后一个自动生成的输入将覆盖之前输入的数据。

【讨论】：

【解决方案2】：

只需将输入类型更改为提交而不是保存

<input type="submit" value="Save" />

您不需要每次都创建新的 div 来创建输入，您可以将其附加到您已有的 div 中

document.getElementById(divName).innerHTML+= "<input type='text' name= 'added_input[]'/>";

或

var newInput=document.createElement('input');
// if you want each input in separate lines
newInput.style.display = "block";
newInput.setAttribute("name","added_input[]");
document.getElementById(divName).appendChild(newInput);

在你的 php 文件中你可以得到这样的 post 值：

for ($i = 0; $i < $_POST['added_input']; $i++){
   echo $_POST['added_input'][$i];
}

有关获取帖子值的更多选项，请参阅This Question

【讨论】：

如何获取php文件中的表单数据？