单击按钮后克隆整个表单元素答案

【问题标题】：Cloning whole form elements after clicking button单击按钮后克隆整个表单元素
【发布时间】：2013-10-28 15:20:49
【问题描述】：

我有以下表格

<form action="" class="form-horizontal">
<div id="wrapper">
    <div class="row-fluid">
        <div class="span6">
            <div class="control-group">
                <label class="control-label"><?=$core->l("default_comm_type");?></label>
                <div class="controls">          
                    <select id="fld_default_comm_type" name="fld_default_comm_type[]" defaultValue="-1" class="m-wrap span10" field="fld_default_comm_type" appEditor="true">
                        <?=combo_creator::render_default_comm_types()?>
                    </select>
                </div>
            </div>
        </div>
        <div class="span4 checkerAlign">
            <div class="control-group">
                <div class="controls">
                    <?=$core->l("is_active");?> 
                </div>
            </div>
        </div>
        <div class="span2 checkerAlign"><input type="checkbox" name="fld_active[]" id="fld_active" editType="booleanEdit" appEditor="true"/></div>
    </div>
    <div><a href="#" id="addMore">Add Row</a></div>
</div>

问题是当用户点击添加行按钮时，我需要在里面创建这个表单元素的副本

<div id="wrapper">

我该怎么做？

编辑：已解决

<form action="" class="form-horizontal" id="wrapper">
<div class="row-fluid">
    <div class="span6">
        <div class="control-group">
            <label class="control-label"><?=$core->l("default_comm_type");?></label>
            <div class="controls">          
                <select id="fld_default_comm_type" name="fld_default_comm_type[]" defaultValue="-1" class="m-wrap span10" field="fld_default_comm_type" appEditor="true">
                    <?=combo_creator::render_default_comm_types()?>
                </select>
            </div>
        </div>
    </div>
    <div class="span4 checkerAlign">
        <div class="control-group">
            <div class="controls">
                <?=$core->l("is_active");?> 
            </div>
        </div>
    </div>
    <div class="span2 checkerAlign"><input type="checkbox" name="fld_active[]" id="fld_active" editType="booleanEdit" appEditor="true"/></div>
</div>
<a href="#" id="addMore">add</a>
</form>

在Js部分：

jQuery("#addMore").click(function(){
 var contents = jQuery("form").html();
    jQuery("#wrapper").append(contents);
});

单击添加时，它会按照我的意愿插入表单元素当单击删除时，它会删除元素。谢谢你们的提示问题解决了！谢谢各位。

【问题讨论】：

很高兴听到您已经弄清楚了，请考虑将下面的最佳答案标记为“答案”，以奖励那些试图帮助您的人。

标签： javascript jquery html forms

【解决方案1】：

我认为您需要复制 (row-fluid) 的内容，而不是整个 (Wrapper) 内容，这应该让您在单击 AddMore 链接时添加更多原始表单模板的行。

这是对@user2389688 建议的解决方案的修改：

$("#addMore").click(function(){   
    $(".row-fluid:last").clone().appendTo(".wrapper");  
});

JsFiddle 链接： http://jsfiddle.net/tCY8v/1/

【讨论】：

【解决方案2】：

这样的？

$("#addMore").click(function(){
   var contents = $("form").html();
   $("#wrapper").append(contents);  
});

http://jsfiddle.net/tCY8v/

如果我没有正确理解您的问题。

【讨论】：

如果我理解正确，他想复制表单内容并将其附加到相同表单的 div 中。如果他只想添加一行，那么他需要澄清这一点。
完全没有错。如果您查看问题，这正是他所要求的。
他说他需要复制form的内容，但是如果你调查一下他的问题背后的逻辑，他实际上需要呈现一个新的一行元素，这些元素原本在表单中=> .row-流体 div。我的意思（错误）是最终可用的解决方案肯定不是任何请求的理想结果。

【解决方案3】：

例如：

$('#addMore').click(function() {
    $('.row-fluid').eq(0).clone().insertBefore(this);
});

【讨论】：