我想创建一个动态变化的表单。
我有一个用于创建项目的表单（包含以下字段：project_name、project_description...），该项目可以有任意数量（大于或等于 0）的类别。
我想要的是显示一个按钮，让用户可以选择添加另一个类别字段。此外，我还希望用户可以“删除”类别字段的选项（如果他改变主意或犯了错误）。最好的方法是什么。我想要一个 Ajax 类型的解决方案。
到目前为止，我的解决方案是在最后一个类别下方留下一个空 div，然后单击按钮将另一个字段加载到该 div 中，另一个 div 将用于下一个 div。对此解决方案不满意，因为我现在必须计算我拥有多少个字段并为每个 div 提供它自己的 id，这使问题更加复杂。
有没有更简单的解决方案？
【问题讨论】：
如果您尝试使用按钮动态添加字段，您可以通过执行以下操作轻松完成：
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();
});
【讨论】：
不久前，我开始编写基于 JSON 定义的表单生成器。它可以工作，但可以使用一些增强功能。它是使用 Prototype.js 编写的，但将其移植到 jQuery 上并不费力。
欢迎你窃取the code。 （只看源码）
【讨论】：
我做过类似的事情。要删除字段，我并没有真正删除字段。我只是用display:none 隐藏了它们，并有一个隐藏的input“删除”我触发为真。然后，收到结果的页面就知道要删除数据库中的哪个字段了。
在提交表单之前它们不会被删除。这就像一个“两次通过”的概念。但是，如果您真的不需要真正的 ajax，它就可以正常工作。否则，您需要您的 JS 删除函数来调用服务器并告诉删除带有其 id 的字段。代码有点复杂。
【讨论】：