单击按钮后克隆整个表单元素 [英] Cloning whole form elements after clicking button

问题描述

我有以下的表格：

 < form action =class =form-horizo​​ntal> 
< 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> 
 <？= 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 =checkboxname =fld_active []id =fld_activeeditType =booleanEditappEditor =true/>< / DIV> 
< / div> 
< div>< a href =＃id =addMore>添加行< / a>< / div> 
< / div> 
  
 
 
 
 
问题出在用户点击添加行按钮，我需要在里面创建这个表单元素的副本。
 < div id =wrapper> 
  
我该如何做？ 
 
 
编辑：已解决 
 
 
 < form action =class =form-horizo​​ntalid =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> 
 <？= 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 =checkboxname =fld_active []id =fld_activeeditType =booleanEditappEditor =true/>< / DIV> 
< / div> 
< a href =＃id =addMore> add< / a> 
< / form> 
  

在Js部分：

<$ p $点击（函数（）{
var contents = jQuery（form）。html（）;
jQuery（＃wrapper ）.append（contents）;
}）;


当点击add时，就像我想要
一样插入表单元素，并且点击delete时它删除了元素。感谢您的提示球员
问题解决了！谢谢你们。

解决方案

我想你需要复制（ row-fluid ），而不是整个（ Wrapper ）内容，这应该让您在单击 AddMore link。

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

<$ p $（）。code> $（＃addMore）。click（function（）{
$（。row-fluid：last）。clone（）。appendTo（。wrapper） ;
}）;

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

I have this following form

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

The question is when user clicks Add Row button, I need to create a copy of this form elements inside

<div id="wrapper">

How can i do that?

EDIT: SOLVED

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

In the Js part:

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

When add is clicked it inserts form elements just as I wanted and when delete is clicked it deletes elements. Thank you for the tips guys Problem solved! Thanks guys.

解决方案

I think you need to duplicate the contents of (row-fluid), not the whole (Wrapper) contents, this should let you add more rows of your original form template when clicking on AddMore link.

This is an edit to the suggested solution by @user2389688:

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

JsFiddle Link: http://jsfiddle.net/tCY8v/1/

这篇关于单击按钮后克隆整个表单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！