表单中所有输入类型的for循环-已编辑[重复]答案

【问题标题】：for loop for all input type in form - edited [duplicate]表单中所有输入类型的for循环-已编辑[重复]
【发布时间】：2019-06-01 15:29:16
【问题描述】：

我需要帮助来了解如何将此块转换为更简单的 for 循环：

var a,b,c;
a = parseInt(document.getElementById("a").value);
b = parseInt(document.getElementById("b").value);
c = parseInt(document.getElementById("c").value);

是否可以使用 for 循环从表单中获取所有值，然后将其存储在数组中？

arr = [];
for (var i = 0; i < 3; i++) {
    var letter = parseInt(document.......value);
    arr.push(letter);
} // end for

形式：

<form name="yourform">
    <table>
        <tr>
            <td><label for="a">Enter first number:</label></td>
            <td><input type="text" id="a" size="6"></td>
        </tr>
        <tr>
            <td><label for="b">Enter second number:</label></td>
            <td><input type="text" id="b" size="6"></td>
        </tr>
        <tr>
            <td><label for="c">Enter third number:</label></td>
            <td><input type="text" id="c" size="6"></td>
        </tr>
        <tr>
            <td></td>
            <td><button here onclick("functionhere") /></td>
        </tr>
    </table>

【问题讨论】：

表单是什么样的？你能发布HTML吗？（可能有一种不使用 ID 的好方法）
请不要使用table 进行布局。它旨在仅用于显示表格数据。

标签： javascript

【解决方案1】：

您可以通过选择带有查询字符串的inputs 并使用Array.from 映射到每个输入的value 来一次构造一个输入值数组：

const arr = Array.from(
  document.querySelectorAll('[name="yourform"] input'),
  input => input.value
);
console.log(arr);

<form name="yourform">
  <table>
    <tr>
      <td><label for="a">Enter first number:</label></td>
      <td><input type="text" id="a" size="6" value="a!"></td>
    </tr>
    <tr>
      <td><label for="b">Enter second number:</label></td>
      <td><input type="text" id="b" size="6" value="b!"></td>
    </tr>
    <tr>
      <td><label for="c">Enter third number:</label></td>
      <td><input type="text" id="c" size="6" value="c!"></td>
    </tr>
    <tr>
      <td></td>
      <td><button here onclick( "functionhere") /></td>
    </tr>
  </table>
</form>

【讨论】：

【解决方案2】：

只需选择表单容器中包含type=text 的所有输入元素，然后使用Array.prototype.map 对其进行迭代：

let inputs = myFormTable.querySelectorAll('input[type=text]');

btn.addEventListener('click', () => {
  let numbersArr = [...inputs].map(e=>e.value);
  let [ x, y, z ] = numbersArr;
  console.log(numbersArr);
  console.log(x);
  console.log(y);
  console.log(z);
})

label { display: inline-block; width: 180px; }

<div id="myFormTable">
  <label for="a">Enter first number:</label>
  <input type="text" id="a">
  <br />
  <label for="b">Enter second number:</label>
  <input type="text" id="b">
  <br />
  <label for="c">Enter third number:</label>
  <input type="text" id="c">
  <br />
  <button id="btn" type="button">show numbers</button>
</div>

【讨论】：

【解决方案3】：

是的，您只需要一个包含更改内容的数组。

const results = [];
['a', 'b', 'c'].forEach(function (id) {
    const element = document.getElementById(id);
    const result = parseInt(element.value, 10); // Don't use parseInt without specifying the number base!
    results.push(result);
});

【讨论】：

【解决方案4】：

尝试这样做！

function getElements() {
    var len = document.getElementById("frm").elements.length;
    for(var i = 0; i < len; i++) {
        console.log(document.getElementById("frm").elements[i].value);
    }
}

<form id="frm">
    <input type="text/html" name="name" id="name"/>
    <input type="text/html" name="email" id="email"/>
    <input type="text/html" name="phone" id="phone"/>
    <input type="button" value="send" onclick="getElements()"/>
</form>

【讨论】：