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

使用Attribute Starts With Selector [name^="value"] 和jQuery.each()

var tasks = $('input[name^=task]').val();
$.each(tasks,function(index, value){
   //do something with the value
   alert($(this).val());
});

编辑

var tasks = $('input[name^=task]');
$.each(tasks,function(index, value){
   //do something with the value
   $('#Preview').append($(this).val());
});

Answer 2

首先，您无需在服务器端（即 PHP）上为输入字段命名，例如 task1, task2, etc 以区分它们。你只需要给它们一个 name 属性值，比如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">

就像这些字段中的自动值将作为数组发布到 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/

Answer 3

问：now I want to create a preview using jquery/javascript but how can I catch all the fields dinamically：

如果你给他们上课，你可以得到each的所有字段：

$(".className").each(function() {
    do something

下一步，“捕获”所有字段...我假设您可能也想要这些字段的值？详情请查看this example，这是一个加载 key:value 对的 sn-p (form field name : value场）成地图：

var map = {};
$(".activeInput").each(function() {
    map[$(this).attr("name")] = $(this).val();
});

---

打印 div 内的所有值（在这里，我假设您正在谈论 div 的子值）：

<div>
    <span>Hi</span>
    <span>Hello</span>
    <span>Hi again</span>
</div>

$("div").children().each(function () {
   console.log($(this).text());   
});

或

$("div span").each(function () {
   console.log($(this).text());   
});