我想创建一个动态变化的表单。
我有一个用于创建项目的表单(包含以下字段: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();
});
关于html - 创建动态 html 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5156790/