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获取值。

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

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

首先，您不需要提供输入字段名称task1, task2, etc，以便在服务器端区分它们，即在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">

就像那样自动将这些字段中的值作为一个数组发布到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 DEMO：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

下一步，＆＃34;赶上＆＃34;所有领域......我假设您可能也想要这些字段的值吗？查看this example了解详细信息，这是一个加载键：值对的代码段（表单字段名称 ： 值字段）到地图中：

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());   
});

OR

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

Javascript动态表单字段

3 个答案: