"添加其他项目"表单功能

Question

我有一个表单可以让用户输入他们的职业历史 - 这是一个非常简单的表单,只有3个字段 - 类型(下拉列表),详细信息(文本字段)和年份(下拉列表).

基本上我想要包含一些动态功能,用户可以在同一页面上输入多个项目,然后一次性提交.我在Google上搜索并找到了一些示例,但它们都基于表格 - 我的标记基于DIV标记:

<div class="form-fields">

<div class="row">
    <label for="type">Type</label>
    <select id="type" name="type">
      <option value="Work">Work</option>
    </select>
</div>

<div class="row">
    <label for="details">Details</label>
    <input id="details" type="text" name="details" />
</div>

<div class="row">
    <label for="year">Year</label>
    <select id="year" name="year">
      <option value="2010">2010</option>
    </select>
</div>

</div>

所以基本上需要复制带有"行"类的3个DIV标签,或者为了简化事情 - div"form-fields"可以复制.我也知道输入名称必须转换为数组格式.

此外,每个项目都需要"删除"按钮.底部会有一个主提交按钮,提交所有数据.

有人有一个优雅的解决方案吗？

Answer 1

一种方法是:

$('<span class="add">+</span>').appendTo('.form-fields:last');
$('.add').live('click',
               function(){
                   $('.form-fields:first')
                       .clone()
                       .insertAfter('.form-fields:last');
                   $('.add').remove();
                   $('<span class="add">+</span>')
                       .appendTo('.form-fields:last');
               });

JS小提琴演示

但是,它并不是特别漂亮; 而且还没有考虑到对独特ids的需求.