Javascript通过多个表单循环，获取所有输入值

我需要从多个表单输入值构建一个对象，而无需使用jQuery

    <div id="formMain">
    <form id="form_id_1" class="formClass">
        <div id="fullname">
            <p>Full Name</p>
            <input type="text" class="inputClass" name="name" value="Joe">
            <br/>
            <input type="text" class="inputClass" name="name2" value="Doe">
        </div>
        <div id="Address">
            <p>Address</p>
            <input type="text" class="inputClass" name="address" value="1st Maint Street">
        </div>
    </form>
    <form id="form_id_2" class="formClass">
        <div id="fullname">
            <p>Full Name</p>
            <input type="text" class="inputClass" name="name" id="name1" value="Mary">
            <br/>
            <input type="text" class="inputClass" name="name2" id="name2" value="Doe">
        </div>
        <div id="Address">
            <p>Address</p>
            <input type="text" class="inputClass" name="address" id="addressId" value="2nd Maint Street">
        </div>
    </form>
</div>

表单可以由用户动态添加，因此我可以在主表单div中嵌入多个表单

我能够获得第一个表单的值，但当添加多个表单时，我会陷入困境，我试图循环通过主元素，但就是不起作用。以上是我的第一个代码示例工作

var formdata = document.getElementById('formMain').getElementsByTagName('input')
var form = [].map.call(formdata, function( input ) {
    return {'value':input.value};
});

querySelectorAll可用于获取表单和输入。 flatMap可用于将表单映射到输入。 扩展语法[…iterable]可用于将querySelectorAll返回的节点列表转换为数组。 let inputs=[…document.queryselectoral'form']。flatmap=>[…a.queryselectoral'input']； console.loginputs； 全名

地址

全名

地址

---

看看这个-使用querySelectorAll、forEach和push

或者Array.map，只要回调返回创建的对象。 HTML元素集合需要强制转换为数组才能使用映射

console.log在HTML集合上使用forEach 设profile=[]； document.querySelectorAllform.forEachf=>{ 设obj={}； f、 queryselectoralinput.forEachele=>obj[ele.name]=ele.value | |； profile.pushobj } console.logprofile // -------------------------------- console.logUsing Array.map在转换为数组的HTML集合上 profile=[…document.querySelectorAllform].mapf=>{ 设obj={}； f、 queryselectoralinput.forEachele=>obj[ele.name]=ele.value | |； 返回obj； } console.logprofile 全名

地址

全名

地址

var forms=document.querySelectorAllform； var result=Array.fromforms.mapa=>{ var obj={}； Array.froma.querySelectorAll[name].forEachb=>{ obj[b.getAttributename]=b.value； }; 返回obj； }; console.logresult； 全名

地址

全名

地址

你可以试试下面的方法

var formMain=document.getElementByIdformMain； var formmresultareain=document.getElementByIdresultArea； var结果=[]； var formData=+ + “全名

”+ + + + + + “地址

”+ + + ; 函数addForm{ formMain.innerHTML+=formData； } 函数子表单{ var forms=document.getElementsByTagNameform； var输入； var tempResult={}； 结果=[]； 对于变量i=0；i您得到的是输入，但不是名称/值从元素中获取名称和值是很简单的，也没有一般化的能力。@mplungjan感谢您的评论；我写var是因为我已经习惯了，但我理解let和var之间的区别。在这种情况下，这是不相关的。关于ES6的支持，还取决于项目范围。此处未提及的内容对于确保所有用户都能获得良好的体验非常重要。@MarceloVismari对地图评论表示抱歉。您将返回所创建对象的数组。我错过了那部分mplungjan thx作为您的答案，您的代码帮助我了解了在元素循环时我自己的代码失败的地方。@mplungjan感谢您的编辑：提问者希望一个接一个地动态添加表单。我现在看到了。

var formdata = document.getElementById('formMain').getElementsByTagName('input')
var form = [].map.call(formdata, function( input ) {
    return {'value':input.value};
});