[英]Read elements of dynamic form
我有一个表单,用户可以在其中添加任意数量的字段。 他们还可以删除这些字段。
我希望能够有一个数组,该数组以形式记录值的追踪- 最好不使用提交按钮。 也就是说,只要用户更改表单中的值,此数组就会更新。
但是,我不知道该怎么做-因此我尝试使用“提交”按钮创建一个。 但是,它仅读取最终表单条目,而不是所有条目。
这是我在这里的尝试:
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);
});
在这里,尝试一下..这将为您提供完整的提交结果。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.