添加多个字段以形成

Question

我想添加一个为我的表单生成多个字段的函数.

这就是我的表单的样子:

<form action="form_sent.php" method="post">
    <input name="name" type="text" placeholder="Name"><br>
   <input name="phone" type="text" placeholder="Phone"><br>
   <input name="email" type="text" placeholder="E-Mail"><br><br>
   <button>Add more fields</button><br><br>
   <input type="submit">   
</form>

在我的情况下,当点击"添加更多字段"时,我想要3个新字段(名称,电话,电子邮件).

我怎样才能做到这一点？

https://jsfiddle.net/374cxt5s/

Answer 1

试试这个:https://jsfiddle.net/Twisty/q8zj00s0/1/

HTML

<form action="form_sent.php" method="post">
  <ul id="fieldList">
    <li>
      <input name="name[]" type="text" placeholder="Name" />
    </li>
    <li>
      <input name="phone[]" type="text" placeholder="Phone" />
    </li>
    <li>
      <input name="email[]" type="text" placeholder="E-Mail">
    </li>
  </ul>
  <button id="addMore">Add more fields</button>
  <br>
  <br>
  <input type="submit">
</form>

CSS

ul {
  padding: 0;
  margin: 0;
}

ul li {
  list-style: none;
}

JQuery的

$(function() {
  $("#addMore").click(function(e) {
    e.preventDefault();
    $("#fieldList").append("<li>&nbsp;</li>");
    $("#fieldList").append("<li><input type='text' name='name[]' placeholder='Name' /></li>");
    $("#fieldList").append("<li><input type='text' name='phone[]' placeholder='Phone' /></li>");
    $("#fieldList").append("<li><input type='text' name='email[]' placeholder='E-Mail' /></li>");
  });
});

这允许您在提交表单时将结果存储在数组中.由于您可以拥有5个姓名,电话和电子邮件,因此数组是解决此问题的最佳方式.然后在PHP中,您将拥有$_POST['name'][0]第一个.