创建动态 html 表单

Question

我想创建一个动态变化的表单。

我有一个用于创建项目的表单（包含以下字段：project_name、project_description...），并且该项目可以具有任意数量（大于或等于 0）的类别。

我想要的是显示一个按钮，让用户可以选择添加另一个类别字段。此外，我还希望用户可以“删除”类别字段的选项（如果他改变主意或犯了错误）。最好的方法是什么？我想要一个 Ajax 类型的解决方案。

到目前为止，我的解决方案是在最后一个类别下留下一个空的 div，然后单击按钮将另一个字段加载到该 div 中，其中还有另一个 div 将用于下一个 div。对这个解决方案不满意，因为我现在必须计算我有多少个字段，并为每个 div 提供它自己的 id，这使问题更加复杂。

有没有更简单的解决方案？

Answer 1

如果您尝试使用按钮动态添加字段，则可以通过执行以下操作轻松实现：

HTML:

<form>
    <p>
        <label>Name:</label> <input type="text">
        <label>Age:</label> <input type="text">
        <span class="remove">Remove</span>
    </p>
    <p>
        <span class="add">Add fields</span>
    </p>
</form>

JS:

$(".add").click(function() {
    $("form > p:first-child").clone(true).insertBefore("form > p:last-child");
    return false;
});

$(".remove").click(function() {
    $(this).parent().remove();
});

演示：http://jsfiddle.net/UeSsu/1/

Answer 2

不久前我开始编写一个基于 JSON 定义的表单生成器。它可以工作，但可以使用一些增强功能。它是使用 Prototype.js 编写的，但将其移植到 jQuery 并不需要付出巨大的努力。

欢迎您窃取代码。 （只需查看源代码）

Answer 3

我也做过类似的事情。要删除字段，我并没有真正删除字段。我只是用 display:none 隐藏了它们，并有一个隐藏的 input “删除”，我将其触发为 true。然后，接收结果的页面就知道要删除数据库中的哪个字段。

在提交表单之前它们不会被删除。这就像“两次通过”的概念。但如果您并不真正需要真正的 ajax，它也可以正常工作。否则，您需要 JS 删除函数来调用服务器并告诉删除带有其 id 的字段。代码稍微复杂一些。