从输入元素中检索值并存储在数组中答案

【问题标题】：Retrieving the values from input elements and storing in an array从输入元素中检索值并存储在数组中
【发布时间】：2017-05-11 22:39:25
【问题描述】：

我有一个接受用户输入的表单

<form id='myForm'>
        <div id='x'>
                 <h2> start </h2>
            <ul class="rounded">
                <li><input type="text"  placeholder="text" id="o" /></li>
            </ul>
                <h2>dests </h2>
            <ul class="rounded">
                <li><input type="text"  placeholder="text" id="d" /></li>
            </ul>
            <ul class="rounded">
                <li><input type="text"  placeholder="text" id="d" /></li>
            </ul>
        </div> 
<li class="arrow"><a href="#page2" onclick='function()'>Run </a></li>
</form>

我需要一种从表单中的每个字段获取用户输入并将其放入数组的方法。我研究了 getElementByTagName('input')，但这会返回一个 HTMLCollection 对象。有什么建议？（如果您想知道奇怪的语法是怎么回事，我正在使用 jqtouch）

【问题讨论】：

我看到你有两个输入相同的id。 id 应该是独一无二的，到目前为止您还尝试过什么？你的 javsascript 在哪里？
您有多个具有相同 ID 的元素
正如他们在 cmets 中提到的，您有多个具有相同 ID 的控件。您可以尝试下面的代码行。 var inputControls = $('#myForm').find('input[type=text]'); var inputArray = []; $.each(inputControls, function(index, value){ var inputValue = $(item).val(); inputArray.push(inputValue); });
它们必须是唯一的吗？表单是动态的（用户可以添加更多 dest），因此当用户添加更多 dest 时很难增加 id。

标签： javascript arrays forms dom

【解决方案1】：

正如其他人所提到的，小心使用具有唯一 id 的 html id 属性，即每个输入都应该有自己的。

使用 vanilla JavaScript，document.getElementsByTagName() 返回一个实时的html collection，您可以使用[index] 将其成员作为属性访问，以获取您想要的元素。然后使用textObject.value 访问输入的值。

总而言之，document.getElementsByTagName('input')[0].value 将提供第一个输入的值！就是这个逻辑，还要检查sn-p。

还请考虑以下几点：

element.querySelectorAll() 通常比 element.getElementsByTagName() 慢，因为第一个使用文档节点的深度优先前序遍历
element.querySelectorAll() 返回一个静态节点列表

我发现 article 这个话题很有趣。

function retrieve(){
  let list = document.getElementById('inputListContainer');
  let input = list.getElementsByTagName('input');
  let array = [];
  for( let i = 0; i < input.length; i++ ){
    //input[i].value is the same as document.getElementsByTagName('input')[i].value
    array.push(input[i].value); 
  }
  console.log( array );
}

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id='inputListContainer'>
      <!-- Using a single ul to parent list items. Note that this does not affect the script -->
      <ul id='inputList' class='rounded'>
        <li><input type="text"  placeholder="one"/></li>
        <li><input type="text"  placeholder="two"/></li>
        <li><input type="text"  placeholder="three"/></li>
      </ul>
      <button onclick='retrieve()'>Retrieve</button>
    </div>
  </body>
</html>

【讨论】：

【解决方案2】：

为此，您可以使用Document.querySelectorAll()

返回文档中匹配指定选择器组的元素列表（使用文档节点的深度优先前序遍历）。返回的对象是NodeList。

使用document.querySelectorAll("#myForm input"); 将针对ID 的myForm 的表单内的所有输入。

然后使用for() 循环遍历集合并将input 值推送到数组中。

for 语句创建一个循环，该循环由三个可选表达式组成，用括号括起来并用分号分隔，然后是要在循环中执行的语句（通常是块语句）。

for ([initialization]; [condition]; [final-expression]) statement

function BuildArray() {
  var myArray = [];
  var input = document.querySelectorAll("#myForm input");
  for (var i = 0; i < input.length; i++) {
    myArray.push(input[i].value);
  }
  console.log(myArray);
}

<form id='myForm'>
  <div id='x'>
    <h2> start </h2>
    <ul class="rounded">
      <li>
        <input type="text" placeholder="text" id="o" value="first" />
      </li>
    </ul>
    <h2>dests </h2>
    <ul class="rounded">
      <li>
        <input type="text" placeholder="text" id="d" value="second" />
      </li>
    </ul>
    <ul class="rounded">
      <li>
        <input type="text" placeholder="text" id="d" value="third" />
      </li>
    </ul>
  </div>
  <li class="arrow"><a href="#page2" onclick='BuildArray()'>Run </a>
  </li>
</form>

如果需要ID，我还建议保持ID 的唯一性，但对于此任务，选择器中不使用ID，因此如果ID 相同，则没有问题。

如果您对以上源代码有任何疑问，请在下方留言，我会尽快回复您。

我希望这会有所帮助。编码愉快！

【讨论】：

【解决方案3】：

您可以使用Array.prototype.map 从querySelectorAll 获得的input 元素列表中创建一个数组。

尝试填写inputs 并在下面的演示中单击运行：

var elements = document.querySelectorAll('#myForm input');

function callme() {
  var result = Array.prototype.map.call(elements, function(e) {
    return e.value;
  });
  console.log(result);
}

<form id='myForm'>
  <div id='x'>
    <h2> start </h2>
    <ul class="rounded">
      <li>
        <input type="text" placeholder="text" />
      </li>
    </ul>
    <h2>dests </h2>
    <ul class="rounded">
      <li>
        <input type="text" placeholder="text" />
      </li>
    </ul>
    <ul class="rounded">
      <li>
        <input type="text" placeholder="text" />
      </li>
    </ul>
  </div>
  <ul>
    <li class="arrow"><a href="#page2" onclick='callme()'>Run </a>
    </li>
  </ul>
</form>

【讨论】：

【解决方案4】：

试试这个：

function getValues() { 
  var values = []; // Array of input values
  var elements = document.querySelectorAll("#myForm input");

  for(var i = 0; i < elements.length; i++) {
    values.push(elements[i].value);
    //If you need the input ID:
    //values.push({name: elements[i].id , value: elements[i].value});
  }
}

【讨论】：

如果我是你，我会将getElementsByTagName('input'); 与document.querySelectorAll("#myForm input"); 交换，否则这将从页面获取所有输入。 OP 想要从表单中获取所有输入。
不错的收获！谢谢@NewToJS
非常欢迎，您的原始答案非常接近，所以与其提交相同的答案，但有一点小改动，我认为发表评论会更容易:) 老实说，我会添加一些关于使用querySelectorAll() 和一个工作的sn-p。看到demo和详细的回答，似乎更受重视。如果您选择不更新答案，我将提交详细信息。
@NewToJS 同意你的看法。带有详细信息的工作 sn-p 有助于更好地了解其工作原理。

【解决方案5】：

您只需要遍历每个输入并将每个值推入一个数组。你会在点击时调用这样的东西。请参阅此处的 jQuery 示例。

function click() {
   var arr = [];

   $.each($('input'), function(k,v) {
      arr.push($(v).val());
   })

   console.log(arr);
}

【讨论】：

jQuery 在这个问题中没有被标记。