Javascript 动态表单字段

Question

我在使用 JavaScript 时遇到困难，需要一些帮助。我有一个表单，它向 php 发送要填充的确切输入数量，现在我想使用 jQuery/javascript 创建预览，但如何动态捕获所有字段。

这是我的表格的一部分供引用:

<td>
    <div class="input-group">
        <span class="input-group-addon">
            <i class="fa fa-pencil"></i></span>
        <input class="form-control" id="task" type="text" name="task" placeholder="Task Title">
    </div>
</td>
<td>
    <div class="input-group">
        <span class="input-group-addon">
            <i class="fa fa-pencil"></i>
        </span>
        <input class="form-control"  id="description" type="text" name="description" placeholder="Task Description">
    </div>
</td>

所以，我在 PHP 中添加了名称字段 + 数字，这样我就可以获得不同的名称，即:task1、task2，...等。

现在我需要做的是使用 jQuery/javascript 获取值。

到目前为止，我的想法是在 for() (循环)内声明 var (变量)

var task = $('input[name=task]').val();

如何获取所有值task1、task2。没有人知道用户将提交多少个任务字段，所以我需要获取字段的数量

任何帮助指示，以便我能解决这个问题

Answer 1

首先，您不需要为输入字段提供名称，例如task1、task2等来在服务器端(即在PHP。您只需为它们提供一个名称属性值，例如 tasks[] 并注意括号 []，这样您可能会得到如下所示的内容:

<input class="form-control" id="tasks[]" type="text" name="tasks[]" placeholder="Task Title">
...
<input class="form-control" id="tasks[]" type="text" name="tasks[]" placeholder="Task Title">

这些字段中的值将自 Action 为数组发布到 PHP，并且将在 PHP 脚本中像以下那样接收:

$tasks = $_POST['tasks'];
foreach ($tasks as $task){
   echo $task;
} 

第二通过这种方式，您将能够轻松地使用 Javascript 收集输入数据，以便使用 getElementsByName 方法生成预览，如下所示:

function preview(){
      output = "";
      tasks = document.getElementsByName('tasks[]');
      for (i=0; i < tasks.length; i++){
        output += "<b>Title</b>: "+tasks[i].value+"<hr />";
      }
      panel = document.getElementById('panel');
      panel.innerHTML = output;
    }

当然，您可以将此解决方案扩展到表单中的任意数量的字段，例如descriptions[]。

JavaScript 演示:http://jsbin.com/kiyisi/1/