创建动态 html 表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5156790/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a dynamic html form
提问by Nachshon Schwartz
I would like to create a form that changes dynamically.
我想创建一个动态变化的表单。
I have a form for creating a project (with fields such as: project_name, project_description...) and the project can have any amount (bigger or equal to 0) of categories.
我有一个用于创建项目的表单（包含以下字段：project_name、project_description...），并且该项目可以有任意数量（大于或等于 0）的类别。
What i want is to display a button which would give the user the option to add another category field. In addition I would also like the option for category fields to be "deleteable" by the user (if he changes his mind or made a mistake). What would be the best way to do so. I would like an Ajax type solution.
我想要的是显示一个按钮，让用户可以选择添加另一个类别字段。此外，我还希望用户可以“删除”类别字段的选项（如果他改变主意或犯了错误）。这样做的最佳方法是什么。我想要一个 Ajax 类型的解决方案。
My solution so far is to leave an empty div beneath the last category and onclick of the button to load another field into that div with yet another div which will be used for the next div. Not to happy with this solution since i now have to count how many fields I have and give each div it's own id which complicates the matter even more.
到目前为止，我的解决方案是在最后一个类别下方留下一个空的 div，然后单击按钮将另一个字段加载到该 div 中，另一个 div 将用于下一个 div。对这个解决方案不满意，因为我现在必须计算我有多少个字段，并为每个 div 赋予它自己的 id，这使问题更加复杂。
Is there a more simple solution to this?
有没有更简单的解决方案？
回答by dmackerman
If you are trying to add fields dynamically with a button, you can easily do so by doing something like the following:
如果您尝试使用按钮动态添加字段，您可以通过执行以下操作轻松实现：
HTML:
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:
JS：
$(".add").click(function() {
$("form > p:first-child").clone(true).insertBefore("form > p:last-child");
return false;
});
$(".remove").click(function() {
$(this).parent().remove();
});
回答by Diodeus - James MacFarlane
I started to write a form generator is based on a definition in JSON a while back. It works but could use some enhancements. It's written using Prototype.js but it wouldn't be a huge effort to port it over to jQuery.
不久前，我开始编写基于 JSON 定义的表单生成器。它有效，但可以使用一些增强功能。它是使用 Prototype.js 编写的，但将其移植到 jQuery 上并不会付出巨大的努力。
You're welcome to steal the code. (just view source)
欢迎您窃取代码。（只看源码）
回答by Vitorio
I've done something similar. To delete fields I didn't really removed fields. I just hidden them with a display:noneand had a hidden input"delete" that I trigger to true. Then, the page receiving the result knows which field is to be deleted in the database.
我做过类似的事情。要删除字段，我并没有真正删除字段。我只是用 a 隐藏它们display:none并有一个隐藏的input“删除”，我触发为真。然后，接收结果的页面就知道要删除数据库中的哪个字段。
They are not deleted before the form is submitted. It's like a "two pass" conception. But if you don't really need a true ajax, it works fine. Otherwise you need your JS remove function to call the server and tell to delete the field with its id. A little bit more complex to code.
在提交表单之前，它们不会被删除。这就像一个“两遍”的概念。但是如果你真的不需要一个真正的ajax，它就可以正常工作。否则你需要你的 JS remove 函数来调用服务器并告诉删除带有它的 id 的字段。代码稍微复杂一点。
