如何使用JavaScript遍历表单元素？
如何使用JavaScript遍历表单元素？
提问于 2013-11-14 21:14:40
我有一张表格：
<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或其他库。我还希望将迭代限制为表单元素，而不是可能添加到表单中的任何其他元素。
回答 5
Stack Overflow用户
发布于 2013-11-14 21:26:08
您需要获取窗体的引用，然后可以迭代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")
}你基本上可以节省一张支票。
Stack Overflow用户
发布于 2018-08-10 09:09:55
一种现代的ES6方法。使用您喜欢的任何方法选择表单。使用扩展运算符将HTMLFormControlsCollection转换为数组，然后forEach方法可用。[...form.elements].forEach
更新:与传播Array.from(form.elements)相比，Array.from是一个更好的选择，它的行为更清晰。
下面的示例遍历表单中的每一个输入。您可以通过检查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 & Cs</span>
<input type="hidden" name="_id" />
<input type="submit" name="_id" />
</form>
</div>
Stack Overflow用户
发布于 2018-06-10 06:32:08
您可以像这样迭代命名字段：
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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19978600
复制相关文章
相似问题