用数组填充表单字段

Question

如何获取数组值并填充现有的文本字段。 例如，数组将有5个值，并且将有5个文本字段。

Array [ tom, Matt, Lucy, Suzanna, Hank ]
<input type="text" name="firstName" value="">
<input type="text" name="firstName" value="">
<input type="text" name="firstName" value="">
<input type="text" name="firstName" value="">
<input type="text" name="firstName" value="">

Answer 1

您应该可以使用以下内容来迭代<input>元素并弹出每个名称，直到每个名称都用完为止：

// Your array
var array = ['Tom', 'Matt', 'Lucy', 'Suzanna', 'Hank'];

// Loop through the array and target the next available textbox
for(var input in document.getElementsByName('firstName')){
    // If there are any names to use, use one
    if(array.length > 0){
       // Pop the next name off of your array and set the value
       // of your textbox
       input.value = array.pop();
    }
}

如果您在使用上面的示例设置值时遇到任何问题，您可以使用稍微不同的循环来处理事情：

// Your array
var array = ['Tom', 'Matt', 'Lucy', 'Suzanna', 'Hank'];

// Store your input elements
var inputs = document.getElementsByName('firstName');
// Loop through the array and target the next available textbox
for(var i = 0; i < inputs.length; i++){
        // If there are any names to use, use one
        if(array.length > 0){
           // Pop the next name off of your array and set the value
           // of your textbox
           inputs[i].value = array.pop();
        }
}

您可以see a working example in action here以及使用您提供的数据的输出结果如下所示：

Answer 2

您可以作为一个整体迭代数组，或者只是简单地逐个访问每个数组值

Answer 3

你可以用不同的方式做到这一点。 e.g

给字段一个类并使用jquery将值添加到它们

<input type="text" class="damn" name="firstName" value="">
<input type="text" class="damn" name="firstName" value="">
<input type="text" class="damn" name="firstName" value="">
<input type="text" class="damn" name="firstName" value="">
<input type="text" class="damn" name="firstName" value="">

然后您可以使用jquery或javascript将值添加到它们：

var currIndex = 0;
$(document).ready(function(){
    $(".damn").each(function(){
        $(this).val(myarray[currIndex++]);
    });
});

更新：您也可以使用Rion Williams创建的方法。