javascript 循环使用不同名称的表单域
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18661521/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Looping through form fields with different names
提问by Mike
So I have a form with a bunch of Text fields. Some of the fields are related and I need to loop through them and add up the numbers in the value field.
所以我有一个带有一堆文本字段的表单。一些字段是相关的，我需要遍历它们并将值字段中的数字相加。
The fields are all named differently so I can tell them apart so I'm not sure how to look through them.
这些字段的名称都不同，因此我可以将它们区分开来，因此我不确定如何查看它们。
Can I set them all to the same ID or same something to then do the loop based on the shared property? I'd rather not have to manually go through them all but can do that if I have to.
我可以将它们全部设置为相同的 ID 或相同的东西，然后根据共享属性进行循环吗？我宁愿不必手动完成所有这些，但如果必须的话可以这样做。
I guess maybe if all the fields are part of a form array I can figure out where the fields I want start and stop and loop them that way? hmmm
我想也许如果所有字段都是表单数组的一部分，我可以找出我想要开始和停止的字段并以这种方式循环它们？嗯嗯
采纳答案by Mike
Give them all a class name. Eg. class="inputs".
Add them to an array, then loop through with a forloop.
给他们所有的班级名称。例如。class="inputs". 将它们添加到数组中，然后循环遍历for。
var inputs = document.getElementsByClassName("inputs");
for(i =0; i < inputs.length; i++)
{
// whatever you want to do now.
}
回答by Olivier
Native JavaScript is much simpler. A form node is an array of all its named controls, as well as an object with attributes.
原生 JavaScript 要简单得多。表单节点是其所有命名控件的数组，以及具有属性的对象。
The named controls are described in the HTML5 specand in the HTML 4.01 one.
命名控件在HTML5 规范和HTML 4.01规范中进行了描述。
The W3C solution is quite elegant.
W3C 解决方案非常优雅。
var form = document.querySelectorAll( 'form' )[0];
var total = 0;
for (var i = 0; i < form.length; i++) {
console.log( form[i] );
total += parseInt( form[i].value );
}
There's no need for libraries. The only downside is that fieldsets in the form are iterated through as well.
不需要图书馆。唯一的缺点是fieldset表单中的 s 也会被迭代。
回答by Routhinator
This has been asked before, although the question was worded differently.
以前有人问过这个问题，尽管这个问题的措辞不同。
Check here for several solutions, including the one already given by tinkerBot
在此处查看多种解决方案，包括 tinkerBot 已经提供的解决方案
How to parse input[] values and put them into a Javascript Array
回答by Dan Dascalescu
If you want to write semantic HTML, you should group the related <input>fields into a fieldset, add an id to it, then loop through them with:
如果您想编写语义 HTML，您应该将相关<input>字段分组到一个fieldset 中，为其添加一个 id，然后使用以下命令遍历它们：
var total = 0;
var inputs = document.querySelector('yourFieldsetId').querySelectorAll('input');
for (var i = 0; i < inputs.length; ++i) {
total += Number(inputs[i].value);
}
回答by user2722002
If you want all the inputs for a given form, you can use jquery to easily get all the inputs within a form and iterate the values out:
如果您想要给定表单的所有输入，您可以使用 jquery 轻松获取表单中的所有输入并迭代出值：
$("#form1").find("input").each(function( index ) {
console.log($(this).val()); // the value of each input
});
