我想创建一个网页,用户可以通过一个添加按钮添加和删除表单字段集,并删除与要删除的集相关的按钮。输入的值将通过 jquery validate 进行检查,并动态添加规则。请参阅下面我的目标表单的简化示例:
用于添加、删除和验证表单字段集的 JavaScript 代码的良好结构是什么?我用谷歌搜索 - 也在这个网站上 - 并且有许多用于添加表单域集的 javascript 示例。我喜欢在查看源代码中找到的示例:http://www.coldfusionjedi.com/demos/jqueryvalidation/testadd.cfm ,它使用表单模板。但我尤其在删除按钮的 javascript 编码方面遇到困难..(示例中没有)
我的目标(简化)表单(包含 1 组 3 个表单字段的模板):
<form name="myForm" id="myForm" method="post" action="">
<input id="name1" name="name1" />
<input id="email1" name="email1" />
<input id="phone1" name="phone1" />
<input type="submit" value="Save">
</form>
最佳答案
我认为您应该对表单进行模板化。 IE。将其包装在一个函数中,以便您可以一次又一次地创建它。这是一个jsfiddle http://jsfiddle.net/krasimir/2sZsx/4/
HTML
<div id="wrapper"></div>
<a href="#" id="add-form">add form</a>
JS
var wrapper = $("#wrapper");
var addForm = $("#add-form");
var index = 0;
var getForm = function(index, action) {
return $('\
<form name="myForm" id="myForm" method="post" action="' + action + '">\
<input id="name' + index + '" name="name' + index + '" />\
<input id="email' + index + '" name="email' + index + '" />\
<input id="phone' + index + '" name="phone' + index + '" />\
<input type="submit" value="Save">\
<a href="#" class="remove">remove form</a>\
</form>\
');
}
addForm.on("click", function() {
var form = getForm(++index);
form.find(".remove").on("click", function() {
$(this).parent().remove();
});
wrapper.append(form);
});
关于javascript - 动态添加、验证和删除表单字段集,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18521139/