Javascript 用于编辑的复制表单

Javascript 用于编辑的复制表单,javascript,php,jquery,mysql,Javascript,Php,Jquery,Mysql,我有一个表单供用户填写,其中一部分可以使用下面的代码复制 //define template var template = $('.duplicate-sections .form-section:first').clone(); //define counter var sectionsCount = 1; //add new section $('body').on('click', '.addsection', function() { //increment sec

我有一个表单供用户填写,其中一部分可以使用下面的代码复制

//define template
var template = $('.duplicate-sections .form-section:first').clone();

//define counter
var sectionsCount = 1;

//add new section
$('body').on('click', '.addsection', function() {

    //increment
    sectionsCount++;

    //loop through each input
    var section = template.clone().find(':input').each(function(){

        //set id to store the updated section number
        var newId = this.id + sectionsCount;

        //update for label
        $(this).prev().attr('for', newId);

        //update id
        this.id = newId;

    }).end()

    //inject new section
    .appendTo('.duplicate-sections');
    return false;
});

//remove section
$('.duplicate-sections').on('click', '.remove', function() {
    //fade out section
    $(this).closest('.form-section').fadeOut(300,             function(){
    $(this).closest('.form-section').empty();
    });
    return false;
}); 
添加了HTML代码-

<div class="duplicate-sections">
            <div class="form-section">
            <?php 
                foreach ($uid as $key => $value)
{ ?>
        <div class="form-group row">
        <label for="inputFirstName" class="col-form-label col-sm-3 text- 
left text-sm-right">Unit Name</label>
    <input style="width:50px;" class="form-control" type="text" 
name="uid[]" value="<?php echo $value; ?>">
<div class="col-sm-2">
<input style="width:150px;" class="form-control" type="text" name="name[]" 
value="<?php echo $unit[$key]; ?>" required>
</div>
            </div>
    <div class="form-group row">            
<label for="inputFirstName" class="col-form-label col-sm-3 text-left text- 
sm-right">Bought?</label>
<div class="col-sm-1">
<?php echo tep_draw_checkbox_field('bought[]', '1', 
(array_key_exists($key, $bought) && $bought[$key] == '1'));  ?>
</div>  
            <label for="inputFirstName" class="col-form-label col-sm-1 
text-left">Built?</label>
<div class="col-sm-1">
    <?php echo tep_draw_checkbox_field('built[]', '1', 
(array_key_exists($key, $built) && $built[$key] == '1')); ?>
</div>  
    <label for="inputFirstName" class="col-form-label col-sm-1 text- 
left">Primed?</label>
<div class="col-sm-1">
    <?php echo tep_draw_checkbox_field('primed[]', '1', 
(array_key_exists($key, $primed) && $primed[$key] == '1')); ?>
</div>          
    <label for="inputFirstName" class="col-form-label col-sm-1 text- 
left">Painted?</label>
<div class="col-sm-1">
    <?php echo tep_draw_checkbox_field('painted[]', '1', 
(array_key_exists($key, $painted) && $painted[$key] == '1')); ?>
</div>  
            <label for="inputFirstName" class="col-form-label col-sm-1 
text-left">Based?</label>
<div class="col-sm-1">
    <?php echo tep_draw_checkbox_field('based[]', '1', 
(array_key_exists($key, $based) && $based[$key] == '1')); ?>
</div>   
</div>
                <?php } ?>
                </br>       
        <label for="inputFirstName" class="col-form-label col-sm-3 text- 
left text-sm-right"></label><input class="remove col-sm-9" type="button" 
value="Remove Unit"></input>
      </div>
        </div>
        <label for="inputFirstName" class="col-form-label col-sm-3 text- 
left text-sm-right"></label><input class="addsection col-sm-9" 
type="button" value="Add Unit"></input>

单位名称

听起来您在如何再次向用户显示存储表单方面存在问题,而您当前显示的代码与此无关。是的,我认为您可能是对的,我添加了表单代码。我没有看到您在那里进行任何循环?如果您想为存储数据的多个记录输出表单字段,那么应该有一个循环,不是吗?我已经添加了foreach循环并更新了代码。我现在遇到的问题是,当我添加一个新的节时,它会复制当前的2。当然,它会复制,因为您正在克隆
。表单节:first
-但是
:first
在这里是没有意义的,因为您只是从这些元素中的一个开始创建。您或者需要为每个部分创建一个,或者实际选择您真正感兴趣的单个
.form部分
中的第一个元素。