Question

我可以在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>

Answer 1

您可以从下一个代码段开始：

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变量中获得所需的所有内容。

Answer 2

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

           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;
                });
                }

遍历多个表单，并遍历每个表单元素并收集其属性

2 个答案: