如何使用JavaScript循环遍历表单元素？

Question

我有一个表单：

<form method="POST" action="submit.php">
    <input type="text" value="1">
    <input type="text" value="2">
    <input type="text" value="3">
    <input type="text" value="4">
    <button type="submit">Submit</button>
</form>

我该如何遍历表单中的输入元素（以便对它们执行一些验证）？

我更喜欢只使用纯JavaScript，而不是jQuery或其他库。我也想将迭代限制在表单元素上，而不是添加到表单中的任何其他元素。

- Please Delete me

---

尝试使用您的表单元素获取元素标签：getElementsByTagName - Igor Benikov

@DanDascalescu，正如您在HTML中所看到的，_这些_表单字段没有不同的名称。因此，它不是重复的。 - peterh

Answer 1

一种现代的ES6方法。表单具有一个属性elements，它是对所有输入元素的引用。使用您喜欢的任何方法选择表单。使用展开运算符将HTMLFormControlsCollection转换为数组。然后可用forEach方法。例如，[...form.elements].forEach

更新：Array.from是一个比展开运算符更好的替代方案Array.from(form.elements)，它的行为略微更清晰。

---

下面的示例遍历了表单中的每个输入。

您可以使用类型属性过滤出输入类型，如formInputs.filter((input) => input.type !== "submit")

const forms = document.querySelectorAll('form');
const form = forms[0];

Array.from(form.elements).forEach((input) => {
  console.log(input);
});

<div>
  <h1>Input Form Selection</h1>
  <form>
    <label>
      Foo
      <input type="text" placeholder="Foo" name="Foo" />
    </label>
    <label>
      Password
      <input type="password" placeholder="Password" />
    </label>
    <label>
      Foo
      <input type="text" placeholder="Bar" name="Bar" />
    </label>
    <span>Ts &amp; Cs</span>
    <input type="hidden" name="_id" />
    <input type="submit" name="_id" />
  </form>
</div>

- Lex

---

querySelector用于单个查询，例如 [...document.querySelector('form').elements].forEach(el => ...);。 - mythz

在我看来，展开操作符的使用也同样清晰易懂。 - denov

Answer 2

您需要获得表单的引用，然后可以遍历elements集合。因此，例如假设：

<form method="POST" action="submit.php" id="my-form">
  ..etc..
</form>

你将会得到类似这样的内容：

var elements = document.getElementById("my-form").elements;

for (var i = 0, element; element = elements[i++];) {
    if (element.type === "text" && element.value === "")
        console.log("it's an empty textfield")
}

请注意，在支持querySelectorAll的浏览器中，您也可以执行以下操作：

var elements = document.querySelectorAll("#my-form input[type=text][value='']")

并且您将在elements中仅获得具有空值属性的元素。但是请注意，如果用户更改了该值，则属性将保持不变，因此此代码仅用于按属性而非对象属性进行过滤。当然，您也可以混合使用这两种解决方案：

var elements = document.querySelectorAll("#my-form input[type=text]")

for (var i = 0, element; element = elements[i++];) {
    if (element.value === "")
        console.log("it's an empty textfield")
}

你基本上会省下一张支票。

- ZER0

---

请注意，此CSS选择器将忽略没有属性的输入，即使它们默认为“text”，这也不会在属性级别上反映出来。应该有另一个选择器针对input:not([type])与之配合使用。 - Kaiido

@Kaiido：值得注意的是，HTML5添加了一系列新的输入元素类型，其中有几个基本上只是带有额外输入验证的文本框。 - Ilmari Karonen

Answer 3

您可以使用getElementsByTagName函数，它返回具有给定标签名称的元素的HTMLCollection。

var elements = document.getElementsByTagName("input")
for (var i = 0; i < elements.length; i++) {
    if(elements[i].value == "") {
        alert('empty');
        //Do something here
    }
}

演示

如果您已经给表单命名，也可以使用document.myform.getElementsByTagName

带表单名称的演示

- Satpal

---

文档中所有的输入？不是很好的想法。该方法是为指定元素存在的。 - Igor Benikov

为了避免将文档中的所有输入都提取出来，可以对表单对象或类似div这样的块对象应用 .getElementsByTagName("input") 方法。 - James Newton

那个表单中还有一个按钮，"inputs" 会获取到那个按钮吗？ - mLstudent33

Answer 4

您可以通过以下方式迭代命名字段：

let jsonObject = {};
for(let field of form.elements) {
  if (field.name) {
      jsonObject[field.name] = field.value;
  }
}

或者，如果你只需要提交字段：

function formDataToJSON(form) {
  let jsonObject = {};
  let formData = new FormData(form);
  for(let field of formData) {
      jsonObject[field[0]] = field[1];
  }
  return JSON.stringify(jsonObject);
}

- Ansar Ozden

---

或者你可以直接过滤它们：[...form.elements].filter(e=>e.name) - revolver

Answer 5

Es5 forEach:

Array.prototype.forEach.call(form.elements, function (inpt) {
       if(inpt.name === name) {
             inpt.parentNode.removeChild(inpt);
       }
});

否则，可爱的是：

var input;
for(var i = 0; i < form.elements.length; i++) {
     input = form.elements[i];

      // ok my nice work with input, also you have the index with i (in foreach too you can get the index as second parameter (foreach is a wrapper around for, that offer a function to be called at each iteration.
}

- Mohamed Allal

Answer 6

<form id="yourFormName" >
<input type="text" value="" id="val1">
<input type="text" value="" id="val2">
<input type="text" value="" id="val3">
<button type="button" onclick="yourFunction()"> Check </button>
</form>
<script type="text/javascript">
function yourFunction()
{
  var elements = document.querySelectorAll("#yourFormName input[type=text]")
  console.log(elements);
  for (var i = 0; i<elements.length; i++ )
  {
    var check = document.getElementById(elements[i].id).value);
    console.log(check);
    // write your logic here
  }
}
</script>

- Asad Zaman

Answer 7

$(function() {
    $('form button').click(function() {
        var allowSubmit = true;
        $.each($('form input:text'), function(index, formField) {
            if($(formField).val().trim().length == 0) {
                alert('field is empty!');
                allowSubmit = false;
            }
        });
        return allowSubmit;
    });
});

演示

- arvic.rivera

---

jQuery？请看原帖。 - Vishal Kumar Sahu