我有一个表单,可以让用户输入他们的职业历史 - 这是一个非常简单的表单,只有 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>
所以基本上,需要复制“row”类的 3 个 DIV 标签,或者为了简化事情 - div“form-fields”可以只被复制。我还知道输入名称必须转换为数组格式。
此外,每个项目都需要一个“删除”按钮。底部会有一个主提交按钮,用于提交所有数据。
有人对此有一个优雅的解决方案吗?
最佳答案
一种方法是:
$('<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');
});
不过,它并不是特别漂亮;目前还没有考虑到对唯一 id
的需求。
关于jquery - "Add another item"表单功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4599273/