Question

我有表格：

<form action="" method="post">
    <div id="fields_1">
        <input name="field1_1" type="...
        <input name="field2_1" type="...
        <input name="field3_1" type="...
        <input name="field4_1" type="...
    </div>
    <a href="#" onclick="duplicate();">Duplicate</a>
</form>

我希望复制点击所有字段但名称不同，例如当我点击“复制”时显示：

<form action="" method="post">
    <div id="fields_1">
        <input name="field1_1" type="...
        <input name="field2_1" type="...
        <input name="field3_1" type="...
        <input name="field4_1" type="...
    </div>
    <div id="fields_2">
        <input name="field1_2" type="...
        <input name="field2_2" type="...
        <input name="field3_2" type="...
        <input name="field4_2" type="...
    </div>
    <a href="#" onclick="duplicate();">Duplicate</a>
</form>

怎么做？

Answer 1

http://api.jquery.com/clone/

$('#fields_1').clone().attr("id","fields_2").appendTo('#yrContainer');

其中yrContainer是表单，或者是新的div容器。如果您需要更改下面显示的输入名称，请点击此处jsFiddle。

$("#myButton").click( function () {
    var fields = $('#fields_1').clone().attr("id","fields_2"); 
    var inputs = fields.find("input");
    inputs.each(function(i) {
     $(this).attr("name", "field"+i+"_2");
   });   
  fields.appendTo('#yrContainer')
})

Answer 2

首先：将class =“items”添加到容器

<div id="fields_1" class="items">
 ...
</div>

第二：移出“复制”链接的形式。

</form>
<a href="#" onclick="duplicate();">Duplicate</a>

第三：尝试使用此代码：

function duplicate(){
    // Get content to clone
    var line_to_clone = $('#fields_1').html();

    // Get new line id
    var next_line_id = $('.items').length + 1;

    // Add the div container
    var line_to_clone = '<div id="fields_' + next_line_id + '" class="items">' + line_to_clone + '</div>';

    // Create new line
    var new_line = line_to_clone.replace(/_1/gi, "_" + next_line_id);

    // Render it
    $('form').append(new_line);
}

Answer 3

duplicate()功能在哪里。这就是你编写它的方式纯粹的javascript方式。对于Jquery，您需要一个克隆方法，而不是编写任何名为duplicate（）的方法。应该非常简洁明快。

如何在jQuery中复制表单内容？

3 个答案: