创建动态html表单

发布时间：2020-12-14 21:21:03 所属栏目：资源来源：网络整理

导读：我想创建一个动态变化的表单. 我有一个用于创建项目的表单(包含：project_name,project_description …等字段),项目可以包含任何数量(大于或等于0)的类别. 我想要的是显示一个按钮,让用户可以选择添加另一个类别字段.此外,我还希望用户可以“删除”类别字段

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

我有一个用于创建项目的表单(包含：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();
});

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!