閱讀動態表單的元素

我有一個表單，用戶可以添加任意數量的字段。他們也可以刪除這些字段。閱讀動態表單的元素

我希望能夠有一個數組，可以保存跟蹤值的形式 - 最好不使用提交按鈕。即每當用戶更改表單中的值時更新此數組。

但是，我不知道該怎麼做 - 所以我試圖使用提交按鈕來創建一個。但是，它只會讀取最終的表單條目，而不是所有條目。

這是我嘗試在這裏：

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



});

來源

2017-06-16 Tomi

，你必須是因爲當你克隆行輸入字段的名稱相同的問題..我可以讓你生成名稱的例子，這對你會好嗎？ –

這很好 - 可能更有幫助 - 但如果它生成名稱，我仍然希望能夠對所有輸入進行操作。即能夠總結所有輸入的數據，但如果他們不在一個大陣列中，我不知道該怎麼做。 – Tomi

看看我發佈的@answer，它給你所有的結果與你的變量作爲數組 –

這裏，試試這個..這會給你充分提交結果..

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>

來源

2017-06-16 13:27:52

閱讀動態表單的元素

回答

相關問題