Question

这应该很简单，但我遗漏了一些东西。

我有以下表格：

<div id="rsvp">
<form class="form-inline">    
    <fieldset>
        <label class="control-label" for="input01" id="rsvp_label">John Smith</label>
        <label class="control-label">Attending?:</label>          
        <label class="radio"><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Yes</label>
        <label class="radio"><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">No</label>            
        <label class="control-label small" for="select01" id="meal">&nbsp;&nbsp;Meal Selection:</label>
        <select id="selectMeal" class="input-small">
            <option>Chicken</option>
            <option>Beef</option>
        </select>
        <button type="submit" class="btn btn-primary" id="btnrsvp">Save / Confirm Changes</button>                      
    </fieldset>
</form>
</div>

我成功地在数据库中提取了与我的查询匹配的记录，并且我有1 - ＆gt; n记录。我想为每条记录克隆这个表格。所以我可以遍历记录，但是我很难弄清楚如何实际克隆字段集然后递增id以便我可以将表单操作附加到每个。或者也许有更好的方法来做到这一点......？

Answer 1

控件将是表单标记 - 放置data-id="3"，其中3表示john smith的用户ID。然后将所有输入ID更改为data-id，并在表单提交处理程序上，只需将所述数据提交到<form>标记的data-id属性的任何记录映射。

Answer 2

如果整个表单使用类而不是ID作为元素，则可以随意克隆和重用，而无需解析ID。使用每种形式的数据属性或隐藏输入跟踪记录ID。

如果您在任何表单字段元素上有依赖于表单中其他字段的事件处理程序，您只需在单个表单的上下文中查找它们

事件处理程序示例（选择ID更改为类）：

 <select class="input-small selectMeal">
    <option>Chicken</option>
     <option>Beef</option>
 </select>

JS

$('.selectMeal').change(){
   var rsvp_name= $(this).closest('.form-inline').find('.rsvp_label').text();
   if( rsvp_name=='John Smith')  doSomething();
})

Answer 3

查看SheepIt，一个表单克隆jQuery插件。

使用jQuery从数据库记录中克隆表单

3 个答案: