“添加另一项”表单功能

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>

因此，基本上需要复制带有class "row“的3个DIV标记，或者为了简化起见，可以只复制div”form-field“。我还知道，输入的名称必须转换为数组格式。

此外，每个项目都需要一个“删除”按钮。在底部将有一个主要的提交按钮，用于提交所有数据。

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

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 Fiddle demo

不过，它并不是特别漂亮；而且还没有考虑到对唯一id的需求。

Answer 2

我现在经常这样做。下面是我使用的大型元素的概要：

1. 使用最新版本的JQuery附带的模板。
2. 从服务器来回传递一个包含所有必需数据的JSON对象。

var data ={ items：{ id: 1234，work："work"，details："details"，year："2010“}}；

• 创建一个javascript函数，该函数可以为特定属性创建唯一的id。

函数GetFieldId(type，id，prop) { return type，id，prop.join("_")；}

• 在模板中，使用上面的函数为每个用户可以交互的元素添加id。创建在对象上实际不存在的“属性”对于按钮和类似的elements.

• Using JQuery委托很有效，为任何具有id的输入创建一个" change“处理程序。

• 在更改处理程序中，将id拆分，找到合适的对象，然后开始工作。

• 若要添加项，请创建新对象，将其抛入适当的JSON数组中，呈现模板，并将其放到页面上的正确位置。

• 若要删除对象，请向该对象添加"IsDeleted”属性，删除HTML涉及将此elements.

• Saving对象向上推送到服务器，服务器将对其进行分析并采取适当的操作。

Answer 3

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');
}