复制表单部分

Posted 2023-02-22

【中文标题】复制表单部分

【英文标题】：Duplicating form sections

【发布时间】：2017-03-22 17:23:22

【问题描述】：

希望有人可以帮助我处理下面的代码 sn-p。单击按钮时，我试图在我的网站上复制表单字段。

问题是，我无法在同一个 html 页面上对多个表单进行这项工作。这仅适用于第一种形式。当我尝试添加第二个表单时，第二个表单上的按钮会复制第二个表单中的第一个表单。非常感谢任何见解！

HTML

<div class="duplicate-sections">
 <div class="form-section">
    <fieldset>
      <p>
        <label for="firstName">First Name:</label>
        <input name="firstName[]" id="firstName" value="" type="text" />
      </p>
      <p>
        <label for="lastName">Last Name:</label>
        <input name="lastName[]" id="lastName" value="" type="text" />
      </p>
        <a href="#" class="remove">Remove Section</a>
    </fieldset>
  </div>
</div>

<a href="#" class="addsection">Add Section</a>

jQuery

//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).parent().fadeOut(300, function()
        //remove parent element (main section)
        $(this).parent().parent().empty();
        return false;
    );
    return false;
);

【参考方案1】：

Working codepen.

您必须在 remove 操作中更改此部分：

$(this).parent().fadeOut(300, function()
    //remove parent element (main section)
    $(this).parent().parent().empty();
    return false;
);

成为：

$(this).closest('.form-section').fadeOut(300, function()
    $(this).closest('.form-section').empty();
);

使用closest() 函数和特定类form-section 来定位父div。你也必须更换：

.appendTo('.duplicate-sections');

作者：

.appendTo($(this).prev('.duplicate-sections'));

由于如果您只留下一个类 duplicate-sections 新表单将附加到该类的所有元素，因此您必须指定与单击的 href Add Section 相关的表单。

最后要做的是在每个添加部分链接中添加一个额外的属性 data-section 以指定表单的编号（从 0 开始）：

<a href="#" class="addsection" data-section='0'>Add Section</a>

然后将所有表格存储在一个数组中：

var forms = [];

$('.duplicate-sections .form-section').each(function()
  forms.push($(this).clone());                
)

并使用点击链接获取相关表单：

var template = forms[$(this).data('section')];

希望这会有所帮助。

【讨论】：

您好，感谢您的回复。我已经使用您提供的修复程序创建了一个 codepen，但表单重复似乎仍然存在问题。不正确。请看这个链接：codepen.io/EBM84/pen/oYjGzY

我假设这可能意味着将 .duplicate-sections 类更改为每个表单的特定 ID？如果我走那条路，我是否必须为每个表单复制相同的 Jquery 代码？

并不是我不想使用当前的编辑。我只是想理解你评论的这一部分“因为如果你只留下一个类重复部分，那么新表单将被附加到这个类的所有元素中，你必须指定与点击相关的那个href 添加章节。”我只是想了解那部分，所以当我点击表格 2 的按钮时，表格 1 不会在表格 2 下重复。

很抱歉，我刚刚注意到在两个部分中克隆了第一个表单，检查这个codepen，我已经通过在每个@987654338 中使用一个额外的属性data-section 来解决这个问题@link 指定表单的编号

太棒了！这似乎奏效了。如果我向页面添加更多表单，这是否也有效？