从输入字段中提取值并存储在javascript数组中[重复]答案

【问题标题】：Extract values from input fields and store in javascript array [duplicate]从输入字段中提取值并存储在javascript数组中[重复]
【发布时间】：2017-08-26 04:17:49
【问题描述】：

我有一个网页，其中包含一些包含值的输入字段：

<input type="text" id="input_1" value="Apple">
<input type="text" id="input_2" value="Pear">

我需要 Javascript/jQuery 来提取这些值并将它们存储在这样的数组中：

var myArray = ["Apple", "Pear"];

有谁知道这样做的方法吗？

谢谢！

【问题讨论】：

你的意思是var myArray=[$("#input_1").val(),$("#input_2").val()]？ - 为什么不查看 jQuery 手册？这是非常基本的东西
...或Array.from(document.querySelectorAll('input')).map(x => x.value);
太基础了！做一点阅读！
也许我应该澄清一下，我一直在寻找一种方法来自动提取 DOM 中所有元素的值，无论 ID 的名称如何 (input_1 , input_2) 等。对不起，如果这个问题看起来太简单了。

标签： javascript jquery

【解决方案1】：

你必须遍历输入标签：

var data = [];
var inputs = document.getElementsByTagName('input');
for(var i=0; i< inputs.length; i++)
{
  data.push(inputs[i].value);
}
console.log(data);

<input type="text" id="input_1" value="Apple">
<input type="text" id="input_2" value="Pear">

如果你使用 JQuery

    var data = [];
    $('input').each(function(){
      data.push($(this).val());
    });
    console.log(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input_1" value="Apple">
    <input type="text" id="input_2" value="Pear">

优化的 JQuery：

        var data = [];
        $(":text").each(function(){ //only searches for input type="text"
          data.push($(this).val());
        });
        console.log(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input_1" value="Apple">
<input type="text" id="input_2" value="Pear">

更新

我强烈建议您在所有输入元素中使用一个通用类，然后像 $('.the_class') 一样循环遍历它们，因为它更加优化。

【讨论】：

工作正常。甜蜜！
感谢您的更新，因为可能有其他输入元素我想排除在提取它们的值之外。

【解决方案2】：

jQuery 解决方案。

var arr = [];
$('input').each(function(){
  arr.push($(this).val());
});
console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input_1" value="Apple">
<input type="text" id="input_2" value="Pear">

或者纯js解决方案。

var elems = document.querySelectorAll('input[type="text"]'),
    res = Array.from(elems).map(v => v.value);
    console.log(res);

<input type="text" id="input_1" value="Apple">
<input type="text" id="input_2" value="Pear">

【讨论】：

一个 jQuery 和 vanilla jS 的答案。不错！

【解决方案3】：

使用document.querySelectorAll 和Array#map：

var result = [].map.call(document.querySelectorAll('input'), function (e) {
  return e.value
})

console.log(result)

<html>
   <body>
      <input type="text" id="input_1" value="Apple">
      <input type="text" id="input_2" value="Pear">
   </body>
</html>

【讨论】：

【解决方案4】：

您可以使用 jQuery map() 和 get() 返回值数组。

var myArray = $('input[type="text"]').map(function() {
  return this.value;
}).get();

console.log(myArray)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" id="input_1" value="Apple">
<input type="text" id="input_2" value="Pear">

【讨论】：

一个非常好的和干净的解决方案。非常感谢 Nenad Vracar :)