1

我想创建一个网页，用户可以通过一个添加按钮添加和删除表单字段集，并删除与要删除的集合相关的按钮。输入的值将通过 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>
4

2 回答 2

1

我认为你应该模板化表格。即将它包装在一个函数中，这样你就可以一次又一次地创建它。这是一个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);
});
于 2013-08-29T21:32:12.457 回答
0

提交表单时可以进行简单的验证，因此：

$('#myForm').submit({
    var n1 = $('#name1').val();
    var e1 = $('#email1').val();
    var p1 = $('#phone1').val();

    if (n1=='' || e1=='' || p1=='') {
        alert('Please complete all fields');
        return false;
    }
});

请注意，这return false将中止提交并将用户返回到文档。

在这个问题中可以找到添加/删除表单字段的好代码：https ://stackoverflow.com/questions/18520384/removing-dynamically-generated-textboxes-in-jquery

jsFiddle在这里

于 2013-08-29T21:32:14.200 回答