如何在jquery + html + php中创建动态表单?

时间:2016-10-08 21:14:10

标签: php jquery html

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

表单不必是静态的,它必须是动态的,因此用户必须能够生成(ADD)一个非固定(动态)数量的输入标签,然后生成所有输入并填充用户可以点击提交按钮并通过邮件将所有信息发送到php文档。

我完全失去了

我一直在玩这段生成输入的代码,但我无法通过帖子将数据发送到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>

2 个答案:

答案 0 :(得分:0)

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

<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文件中你可以得到这样的帖子值:

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

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

答案 1 :(得分:0)

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