閱讀動態形式的元素

Question

我有一個表單，用戶可以在其中添加任意數量的字段。 他們還可以刪除這些字段。

我希望能夠有一個數組，該數組以形式記錄值的追蹤- 最好不使用提交按鈕。 也就是說，只要用戶更改表單中的值，此數組就會更新。

但是，我不知道該怎么做-因此我嘗試使用“提交”按鈕創建一個。 但是，它僅讀取最終表單條目，而不是所有條目。

這是我在這里的嘗試：

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： https ://jsfiddle.net/tomi2/4cqtpefm/4/

完整代碼：

HTML：

    <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>

Javascript：

$('.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);    



});

Answer 1

在這里，嘗試一下..這將為您提供完整的提交結果。

 var $wrapper = $('.multi-fields'); $(".add-field").on( '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(); }); $('button[type="submit"]').on('click', function(el) { el.preventDefault(); alert( JSON.stringify( $('form').serializeArray() ) ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>