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

【问题标题】：Clone form from database records using jQuery使用 jQuery 从数据库记录中克隆表单
【发布时间】：2012-06-04 06:51:48
【问题描述】：

这应该很容易，但我错过了一些东西。

我有以下表格：

<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 -> n 条记录。我想为每条记录克隆这个表格。所以我可以遍历记录，但是在弄清楚如何实际克隆字段集然后增加 id 以便我可以将表单操作附加到每个记录时遇到了麻烦。或者也许有更好的方法来做到这一点......？

【问题讨论】：

标签： php jquery mysql populate

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：