我希望每次点击“添加”按钮后附加表单的所有元素（即附加整个表单）。我知道我必须使用JQuery，但我不知道如何实现它。这是我的基本代码。
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<legend>Work History</legend>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<?php echo $this->Form->create('Tenant', array('url' => array('controller' => 'users', 'action' => 'addTenantWorkHistories'), 'id' => 'test'));?>
<div class="form-group">
<?php echo $this->Form->input('company_name', array(
'class' => 'form-control',
'name' => 'data[WorkHistory][company_name]',
'required'
));?>
</div>
<div class="form-group">
<?php echo $this->Form->input('position', array(
'class' => 'form-control',
'name' => 'data[WorkHistory][position]',
'required'
));?>
</div>
<div class="form-group">
<label>Address</label>
</div>
<div class="form-group">
<?php echo $this->Form->input('street_number', array(
'class' => 'form-control',
'name' => 'data[Address][street_number]',
'placeholder' => 'Street Number',
'label' => false,
'required'
));?>
</div>
<div class="form-group">
<?php echo $this->Form->input('street', array(
'class' => 'form-control',
'name' => 'data[Address][street]',
'placeholder' => 'Street',
'label' => false,
'required'
));?>
</div>
<div class="form-group">
<?php echo $this->Form->input('unit', array(
'class' => 'form-control',
'name' => 'data[Address][unit]',
'placeholder' => 'Unit',
'label' => false,
'required'
));?>
</div>
<div class="form-group">
<?php echo $this->Form->input('city', array(
'class' => 'form-control',
'name' => 'data[Address][city]',
'placeholder' => 'City',
'label' => false,
'required'
));?>
</div>
<div class="form-group">
<?php echo $this->Form->input('state', array(
'class' => 'form-control',
'name' => 'data[Address][state_id]',
'placeholder' => 'State',
'label' => false,
'required'
));?>
</div>
<div class="form-group">
<?php echo $this->Form->input('country', array(
'class' => 'form-control',
'name' => 'data[Address][country_id]',
'placeholder' => 'Country',
'label' => false,
'required'
));?>
</div>
<div class="form-group">
<?php echo $this->Form->input('zip', array(
'class' => 'form-control',
'name' => 'data[Address][zip]',
'placeholder' => 'Zip',
'label' => false,
'required'
));?>
</div>
<div class="form-group">
<label>Date Started</label>
</div>
<div class="form-group">
<div class="form-inline">
<?php echo $this->Form->input('date_started', array(
'class' => 'form-control',
'name' => 'data[WorkHistory][date_started][]',
'type' => 'date',
'label' => false,
'required'
));?>
</div>
</div>
<div class="form-group">
<label>Date Ended</label>
</div>
<div class="form-group">
<div class="form-inline">
<?php echo $this->Form->input('date_ended', array(
'class' => 'form-control',
'name' => 'data[WorkHistory][date_ended][]',
'type' => 'date',
'label' => false,
'required'
));?>
</div>
</div>
<div class="form-group">
<?php echo $this->Form->input('current_employer', array(
'class' => 'form-control',
'name' => 'data[WorkHistory][current_employer]',
'type' => 'select',
'options' => array(
'yes' => 'Yes',
'no' => 'No'
),
'required'
));?>
</div>
<div class="form-group">
<label>Contact Person</label>
</div>
<div class="form-group">
<?php echo $this->Form->input('first_name', array(
'class' => 'form-control',
'name' => 'data[Contact][first_name]',
'placeholder' => 'First Name',
'label' => false,
'required'
));?>
</div>
<div class="form-group">
<?php echo $this->Form->input('last_name', array(
'class' => 'form-control',
'name' => 'data[Contact][last_name]',
'placeholder' => 'Last Name',
'label' => false,
'required'
));?>
</div>
<div class="form-group">
<label>Phone</label>
</div>
<div class="form-group">
<?php echo $this->Form->input('home', array(
'class' => 'form-control',
'name' => 'data[PhoneNumber][home]',
'placeholder' => 'Home',
'label' => false,
'required'
));?>
</div>
<div class="form-group">
<?php echo $this->Form->input('work', array(
'class' => 'form-control',
'name' => 'data[PhoneNumber][work]',
'label' => false,
'placeholder' => 'Work',
'required'
));?>
</div>
<div class="form-group">
<?php echo $this->Form->input('mobile', array(
'class' => 'form-control',
'name' => 'data[PhoneNumber][mobile]',
'placeholder' => 'Mobile',
'label' => false,
'required'
));?>
</div>
<div class="form-group">
<?php echo $this->Form->input('email', array(
'class' => 'form-control',
'name' => 'data[Contact][email]',
'required'
));?>
</div>
<div class="form-group">
<?php echo $this->Form->input('may_contact', array(
'class' => 'form-control',
'name' => 'data[Contact][may_contact]',
'type' => 'select',
'options' => array(
'yes' => 'Yes',
'no' => 'No'
),
'required'
));?>
</div>
<div class="form-group">
<i class="glyphicon glyphicon-plus" id="adding_form"></i>Add <!--***It should do the job*** -->
</div>
</div>
</di
<div class="row">
<div class="col-md-4 col-md-offset-1">
<?php echo $this->Form->button('Create', array(
'class' => 'btn btn-primary pull-right'
));?>
<?php echo $this->Form->end();?>
</div>
</div>
对于jquery部分，我已经完成了：
<script>
$("#adding_form").on("click", function() {
alert('ok');
});
</script>
如果有人能给我提示，那会非常有帮助吗？ （我知道关于'追加'的基础知识，'顺便追加并顺便克隆）
答案 0 :(得分：0)
我不确定我是否完全理解您的代码要复制的内容是什么，但我会向您展示一个示例。我们假设您的表单由div包含类formToDuplicate并且您希望在用户点击按钮或其他内容时复制表单（div及其包含的所有内容） 。您需要做的是clone要复制的表单以及要添加到的append to。你会做这样的事情：
$(document).ready(function(){
$("#adding_form").on("click", function() {
$("div.formToDuplicate:first").clone().appendTo($("#elementToAppendTo"));
});
});
或者如果您愿意，可以在元素之前添加表单（请参阅insertBefore）：
$("div.formToDuplicate:first").clone().insertBefore($("#elementBeforeWhereToInsert"));
上面的代码假定您要添加的表单是具有div类的第一个 formToDuplicate元素。您只想复制第一个元素，因为当您添加新表单时，它将与您的第一个元素完全重复，因此它还将具有类formToDuplicate。因此，如果您在选择器中省略:first，它将添加所有现有表单。