遍历多个表单并遍历每个表单元素并收集它们的属性答案

【问题标题】：Loop through multiple forms and tha loop through each form elements and gather their attributes遍历多个表单并遍历每个表单元素并收集它们的属性
【发布时间】：2018-07-22 06:21:13
【问题描述】：

我可以在 HTML 中包含一个或多个表单。我想获取所有具有[data-form] 属性的表单。

我需要循环遍历每个表单的元素并获取元素，并将每个元素的“名称”和“值”添加到一个数组中；

我需要单独识别提交按钮。

在下面的代码中，我得到了表单，我如何访问输入的属性（不查询特定元素）并知道哪个是提交？

formAttr = data-form

    document.querySelectorAll(formAttr).forEach(function (form, index) {
            // create a new object for the form
            arr[index] = {};
            arr[index]['Ref'] = form
            for (var element in form.elements){
                // code to add
            }
        });

 <form action="#" method="get" data-form>
            <select>
                <option value="0">1</option>
                <option value="1">2</option>
                <option value="2">3</option>
            </select>
            <div class="arucio">  
             <input type="text" name="firstname">
             <input type="text" name="lastname" value="Paul">
            </div>
             <input type="submit" value="Submit">

</form>

【问题讨论】：

标签： javascript forms

【解决方案1】：

你可以从下一个代码sn-p开始：

HTML：

<form id='f1'>
    <input type='text' value="input_value" />
    <input type='number' value="100" />
</form>

<form id='f2' data-form=true>
    <textarea>Some text</textarea>
</form>

<form id='f3' data-form=true>
    <select>
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
    </select>
</form>

JS：

let arr = [];
document.querySelectorAll('form').forEach(function (form, index) {
    arr[index] = {
                'ref': form,
    };
    let values = [];
    for (i = 0; i < form.elements.length; i++) {
            switch (form.elements[i].nodeName) {
                case 'INPUT':
                    values.push({
                        'type': 'INPUT',
                    'value': form.elements[i].value
                });
                    break;
                case 'TEXTAREA':
                    values.push({
                        'type': 'TEXTAREA',
                    'value': form.elements[i].value
                });
                    break;
                case 'SELECT':
                    values.push({
                        'type': 'SELECT',
                    'value': form.elements[i].value
                });
                    break;

        }
    }    
    arr[index]['values'] = values;
});

现在你在 arr 变量中得到了你需要的一切。

【讨论】：

【解决方案2】：

这里的问题是 for-in 循环。 For-in 循环仅通过对象键而不是实际数组进行迭代。更多详细信息请参见 for-in 循环 here 的 MDN 文档链接。您可以使用 for 循环或减少可以使用 map 的代码，如下面的代码 sn-p 所示。

           formAttr = "[data-form]"
           var arr =[];

            document.querySelectorAll(formAttr).forEach(function (form, index){
                    let values =[];
                    arr[index] = {'ref':form};
                    var elements = [].slice.call(form.elements);
                    elements.map((element)=>{
                       values.push({'type':element.type,'value':element.value})
                   });
                   arr[index]['values']=values;
                });
                }

【讨论】：