问题描述
我有以下的表格:
< 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>
<?= 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-horizontalid =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链接:
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 wantedand when delete is clicked it deletes elements. Thank you for the tips guysProblem 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/
这篇关于单击按钮后克隆整个表单元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!