Javascript 表单字段值在单击按钮时无法通过

根据@issettdm答案编辑

我可以复制所有表单字段，将数据放入一个对象中，然后将该对象推送到一个数据数组中

const data = [];
const appendContent =  () => {
  let form_content = document.querySelector(".form-content");
  const template = document.createElement('template');
  var html = `<div class="form-inline">
    <div class="form-group">
        <label class="sr-only" for="field-name">Field Name</label>
        <input type="text" class="form-control" id="field-name" placeholder="Field Name" name="name">
    </div>
    <span>-</span>

    <div class="form-group">
        <label class="sr-only" for="field-name">Field Name</label>
        <input type="text" class="form-control" id="field-name" placeholder="Field Type" name="type">
    </div>

    <span>-</span>
    <div class="form-group">
        <label class="sr-only" for="field-name">Field Name</label>
        <input type="text" class="form-control" id="field-name" placeholder="Default value" name="default">
    </div>

    <div class="form-group">

    <span class="btn btn-danger" data-role="remove">
        <span class="glyphicon glyphicon-remove">-</span>
    </span>
    <span class="add_button btn btn-primary" data-role="add">
        <span class="add_button glyphicon glyphicon-plus">+</span>
    </span>
    </div>
    </div>`;
  template.innerHTML = html.trim();
  form_content.appendChild(template.content.firstChild);
}

const fake_button = document.querySelector('.btn');
fake_button.addEventListener('click', e => {
    record(e);
    appendContent();
});

const record = (e) => {
    const form = e.target.parentElement.parentElement;
    const inputs = form.querySelectorAll('input');
    const obj = {};
    Array.from(inputs).map(input => {
        obj[input.name]= input.value;
    })
    console.log(obj)
    data.push(obj);
    console.log(data)
}

appendContent();

有没有办法将上面的内容转换为下面的内容，这样我就可以拥有一个包含多个对象的数组

(2) [{…}, {…}]
{_token: "hRQyJ9NlwLdKpZbU7W2REV2I5YF6Pg8D6HcoCof7", name: "4t43", type: "t34t43", default: "tt34t"}
{_token: "hRQyJ9NlwLdKpZbU7W2REV2I5YF6Pg8D6HcoCof7", name: "t3t43", type: "43t4t", default: "t34t3"}
length: 2
__proto__: Array(0)

---

好的，所以我只是稍微处理了一下，我对纯javascript不是很有经验。我提出了一些想法：

1-单独的提交和添加字段按钮

当您按add field时，它只会在表单中添加新字段，这些字段稍后将作为完整表单的一部分提交

2-索引表格

这里的想法是创建一种表单，每对输入由表单本身组成。稍后，当您想要提交时，只需查询所有表单，每个结果都将位于“name=index”属性下

我发现此代码段用于检索表单值：

function getFormValues() {
  var params = [];
  for( var i=0; i<document.myform.elements.length; i++ )
  {
     var fieldName = document.myform.elements[i].name;
      var fieldValue = document.myform.elements[i].value;
      
      params.push({[fieldName]:fieldValue});
       
  }
 console.log(params);
}

函数getFormValues（）{ var参数=[]；

---

对于（var i=0；i我假设您不想重复添加按钮， 我从模板中删除了按钮，这样您只能添加输入字段：

在这里，您可以找到一个工作示例：

const data=[]；
常量appendContent=（）=>{
让form_content=document.querySelector（“.form content”）；
const template=document.createElement（'template'）；
常量html=`
`
template.innerHTML=html.trim（）；
表单_content.appendChild（template.content.firstChild）；
}
const fake_button=document.querySelector（'.btn'）；
假按钮。添加事件列表（'click'，e=>{
记录（e）；
附件内容（）；
});
常数记录=（e）=>{
const form=e.target.parentElement.parentElement；
常量输入=form.querySelectorAll（'input'）；
常量obj={}；
数组.from（输入）.forEach（输入=>{
obj[input.name]=input.value；
})
数据推送（obj）；
控制台日志（数据）；
}
appendContent（）；

.btn{
显示：块；
宽度：70px；
光标：指针；
边框：1px实心#333；
填充物：5px10px；
文本对齐：居中；
}

添加
拯救

首先，你似乎永远不会终止你的

常量html=

字符串。@Marc看起来是的，但我刚才要编辑的问题中有一个打字错误。你能详细说明为什么要复制字段吗？你想重设表单吗？@ThalesKenne我编辑了我的问题，希望它听起来更详细。很好，现在更清楚了。让我想想bitI在这里只看到一个问题：出于某种原因，data.push（obj）创建了另一个数组，而不是将对象放在数组中。是否有解决方法？我将数据视为对象数组，我没有看到任何嵌套数组，这很好->0:{u标记：“hRQyJ9NlwL”，名称：“4t43”，键入：“t34t43”，默认值：“tt34t”}，0引用位置。您将看到数据[0]返回的是对象而不是数组。

function getFormValues() {
  var params = [];
  for( var i=0; i<document.myform.elements.length; i++ )
  {
     var fieldName = document.myform.elements[i].name;
      var fieldValue = document.myform.elements[i].value;
      
      params.push({[fieldName]:fieldValue});
       
  }
 console.log(params);
}