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上并不是一件巨大的工作。

欢迎你偷the code。（只是查看来源）

Answer 3

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

在提交表单之前不会删除它们。这就像是“两通”的概念。但如果你真的不需要真正的ajax，那就行了。否则你需要你的JS删除函数来调用服务器并告诉删除带有id的字段。编码要复杂一点。

创建动态html表单

3 个答案: