我有一个表单可以让用户输入他们的职业历史 - 这是一个非常简单的表单,只有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”可以复制。我也知道输入名称必须转换为数组格式。
此外,每个项目都需要“删除”按钮。底部会有一个主提交按钮,提交所有数据。
任何人都有这个优雅的解决方案吗?
答案 0 :(得分:5)
一种方法是:
$('<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
的需求。
答案 1 :(得分:0)
我现在经常这样做。以下是我使用的大型元素的概述:
从服务器传来一个包含所有必要数据的JSON对象。
var data = {items:[{id:1234,work:“work”,details:“details”,year:“2010”}]};
创建一个可以为特定属性创建唯一ID的javascript函数。
function GetFieldId(type,id,prop){ return [type,id,prop] .join(“_”); }
在模板中,使用上面的函数将id添加到用户可以与之交互的每个元素。创建对象上实际不存在的“属性”适用于按钮和类似元素。
使用JQuery委托,为具有id的任何输入创建“更改”处理程序。
在更改处理程序中,将id拉开,找到正确的对象,然后继续工作。
要添加项目,请创建一个新对象,将其放入相应的JSON数组中,渲染模板,然后将其放到页面上的正确位置。
要删除对象,请在对象中添加“IsDeleted”属性,然后删除HTML元素。
保存涉及将此JSON对象推送到服务器,在那里它将对其进行分析并采取适当的措施。
答案 2 :(得分:0)
HTML:
<div class="form-fields">
<div class="row">
<label>Type
<select name="type[0]">
<option value="Work">Work</option>
</select>
</label>
</div>
<div class="row">
<label>Details
<input type="text" name="details[0]" />
</label>
</div>
<div class="row">
<label>Year
<select id="year" name="year[0]">
<option value="2010">2010</option>
</select>
</label>
</div>
</div>
JS:
var counter = 0, formFieldsString = '<div class="form-fields"...';
function addNew()
{
$(formFieldString.replace('[0]', '['+(++counter)+']')).appendTo('#form-fields-parent');
}
答案 3 :(得分:0)
我使用jQuery和ASP.NET的组合做这样的事情。
首先,我在ASP.NET(* .ascx)中编写了一个包含“行”的部分页面。在您的情况下,由于这三个项目在一起,所有这些项目可以被视为一行。 (您可以使用CSS样式使它们看起来像它们在一起。)我还在行的末尾放置一个图像(加号),这样,如果用户点击该加号,我可以添加一个新行(更多关于这一点)。
在任何情况下,我都会将部分行添加到页面中以开始使用。 (我使用强类型页面,这样我就可以遍历模型并将单个行传递给我的部分页面。)我在表格中显示所有这些内容。 (在我的例子中,它由tabluar数据表示,但不一定是。)
对于加号,当用户点击它时,我会根据部分页面添加一个新行。这些方面的东西:
personAdd($('#addPerson'), '#personInformation');
function personAdd(personDiv, tableName) {
personDiv.live('click', function () {
$.ajax({
url: this.href,
cache: false,
success: function (html) { $(tableName + ' > tbody:last').append(html); }
});
$(this).replaceWith('<img alt="Delete Person" class="deleteImg" src="/Content/Images/remove_delete_cancel_clear.png" />');
return false;
});
}
这会添加一个新行,并将上一行更改为“删除图像”(红色X),以便可以删除以前的行。我用这个jQuery来处理这个问题:
// Allow rows to be deleted.
$('.deleteImg').live('click', function () {
$(this).closest('tr').remove();
});
由于所有内容都是强类型的,所以当我继续提交表单时,它的效果非常好。我希望这会有所帮助,让你开始,或者可能帮助其他人。如果您有任何问题,请与我们联系。