Javascript 读取动态形式的元素

我有一个表单，用户可以在其中添加任意数量的字段。它们还可以删除这些字段

我希望能够有一个数组来跟踪表单中的值-最好不使用提交按钮。i、 e.每当用户更改表单中的值时，此数组都会更新

但是，我不知道如何做到这一点，所以我尝试使用submit按钮制作一个。但是，它只读取最终表单条目，而不是所有条目

这是我在这里的尝试：

document.querySelector('form.data').addEventListener('submit', function (e) {
//prevent the normal submission of the form
e.preventDefault();
var values = {};
$.each($('form.data').serializeArray(), function(i, field) {
values[field.name] = field.value;
});

console.info(values);    

});

JSFiddle：

完整代码：

HTML:

---

来，试试这个。。这将为您提供提交时的完整结果

var$wrapper=$（'.multi-fields'）；
$（“.add字段”）。在（'click'，函数（e）{
$（'.multi-field:first-child'，$wrapper.clone（true）.appendTo（$wrapper.find（'input'）.val（''）.focus（）；
});
$（'.multi-field.remove-field'，$wrapper）。单击（函数（）{
如果（$（'.multi-field'，$wrapper）.length>1）
$（this.parent（'.multi-field'）.remove（）；
});
$（'button[type=“submit”]”）。在（'click'，函数（el）{
el.preventDefault（）；
警报（JSON.stringify（$（'form'）.serializeArray（））；
});

变量1，变量2
去除
添加字段
提交
您遇到的问题是，克隆行时，输入字段具有相同的名称。。我可以用生成的名称为您举例，这对您合适吗？这很好-可能更有用-但如果它生成名称，我仍然希望能够对所有输入进行操作。也就是说，我可以汇总所有输入的数据，但如果它们不在一个大数组中，我就不知道该怎么做。看一看@answer I posted，，它会给出所有结果，变量为数组
    <form role="form" action="/wohoo" method="POST" class="data">
      <label>Variable 1, Variable 2</label>
        <div class="multi-field-wrapper">
          <div class="multi-fields">
            <div class="multi-field">
              <input type="text" name="Var1[]">
              <input type="text" name="Var2[]">
              <button type="button" class="remove-field">Remove</button>
            </div>
          </div>
        <button type="button" class="add-field">Add field</button>
        <button type="submit"> Submit </button>

      </div>
    </form>

$('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    $(".add-field", $(this)).click(function(e) {
        $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
    });
    $('.multi-field .remove-field', $wrapper).click(function() {
        if ($('.multi-field', $wrapper).length > 1)
            $(this).parent('.multi-field').remove();
    });
});

document.querySelector('form.data').addEventListener('submit', function (e) {
    //prevent the normal submission of the form
    e.preventDefault();

    var values = {};
    $.each($('form.data').serializeArray(), function(i, field) {
    values[field.name] = field.value;
});

    console.info(values);    



});