HTML

Question

我编写了一个脚本来克隆和重命名调查问卷中的输入字段。当我测试它时，我看到它也克隆了输入到字段中的信息。

我尝试使用.val（＆＃39;＆＃39;）和.reset（），但两者都没有奏效。在做了一点研究之后，我了解到这是因为我有一个输入字段的组合，并且它们并不适用于所有这些字段。所以我决定创建一个＆＃34; if＆＃34;深入挖掘的声明，仍然没有清除克隆的输入。我检查了控制台并没有收到任何错误，所以我不知道出了什么问题。

这里是代码

$("#p20_01_yes").click(function(){
var num = $('.clone_el').length,
newNum = new Number(num + 1),
clonedFieldset = $("#cloner").clone().prependTo("#page20");

clonedFieldset.attr('id',('cloner')+newNum).find("input, textarea, select, label, #cus_title").each(function() {
    var item = $(this),
    type = this.type,
    tag = this.tagName.toLowerCase();

    item.attr('name', item.attr('name') +newNum).attr('id', item.attr('id') +newNum);
    $('#cus_title').text("Customer "+newNum);

    if (type =='text'||tag=='textarea')
    this.value='';

    else if (tag=='select')
    this.selectedIndex=0;

});
});

我克隆的部分有文本输入，textareas和选择输入。我也发布了HTML，但它超过了这些帖子的30,000个字符限制。如果你想要一个JSFiddle，我可以把它放在一起，但是看看我对JQuery和Javascript还是一个新手我觉得它可能只是我的语法。

这里是JSfiddle：https://jsfiddle.net/Optiq/ct2ju1cb/

Answer 1

您的脚本存在一些问题：

TL;DR

您正在创建的新元素正在清空，您只是将它们添加到页面顶部（请参阅上面的＃1），并且您以某种方式更改了错误的客户标题元素（＃3）所以看起来新元素并没有被清空。解决这些问题是一个很好的起点，但这样做可能会发现其他问题（＃2，＃4）。

详细信息（不是所有错误的完整列表）

您预先添加新项目而不是附加新项目，因此它们会被添加到页面顶部而不是底部
您没有正确地推导出新元素的name和id个。 item.attr('name') +newNum解析为NaN，您可以通过检查浏览器的开发者控制台中的新元素来查看。然后，您拥有id="NaN"的许多元素，这绝对不是您想要的
您正在克隆#cusTitle但未更改其id，这意味着$("#cusTitle")的返回值将是未定义的。在我的浏览器中，结果是返回值是第二个#cusTitle，这不是我所期望的，并且它不是你想要的东西
您正在为一些最初没有这些项目的项目提供新的name个attrs（就像我检查过的所有<label>个元素一样）

Answer 2

按照您创建代码的方式做您想做的事情真的很难。我决定制作一个新脚本，为您简化逻辑。它无论如何都不是最佳实践，但在我看来它比实际代码更好：D我希望你能理解它，并且能够调整就像你想要的那样。您必须根据自己的需要构建config对象，这很可能只是您需要做的事情。

基本上，此脚本的主要思想是构建表单＆＃34; on go＆＃34; ，通过设置un config对象（JSON数组），然后迭代它以构建和呈现输入。

注意为了简单起见，我使用bootstrap为表单添加更好的外观，您应该将其调整到您的模板，或者也包含引导程序（为什么不呢？：D）

HTML

<div id="content" class="container">
    <button id="addcustomer" class="btn btn-sm btn-success pull-right">Add customer</button>
    <div id="page">
        <form action="/form.php" id="form">
            <!-- form content goes here -->
        </form>
    </div>
</div>

的jQuery：

$(document).ready(function () {
    // first, set a JSON object with this format to config the questions/inputs, actually it supports text and number inputs, select and textarea
    var config = [
        {"type": "text", "name": "name", "label": "Name"},
        {"type": "select", "name": "gender", "label": "Gender", "options": [
            {"value": "m", "text": "Male"},
            {"value": "f", "text": "Female"}
        ]},
        {"type": "number", "name": "age", "label": "Age"},
        {"type": "textarea", "name": "bio", "label": "Bio"}
    ];

    var customer = 1; // start the counter for customers
    $('#addcustomer').on('click', function () {
        customer++; //when the button is clicked, increase customer counter and trigger the function to create the new inputs
        addNewCustomer(customer);
    });    

    //this function pass the customer's count to buildForm() function to build the input names and ids
    function addNewCustomer(cn) {
        buildForm(cn);
    }

    //the buildForm() function creates the HTML with the inputs coming from buildInput() function.
    function buildForm(cn) { // cn =customer number
        var formHtml = $('#form');
        formHtml.append('<h2 class="page-header"><i class="glyphicon glyphicon-user"></i> Customer ' + cn + '</h2>');
        $.each(config, function (index, item) {
            var entry = '<div class="form-group panel panel-default panel-body">' + buildInput(item, cn) + '</div>';
            formHtml.append(entry);
        });
    }

    // The buildInput() function is called on each iteration over the config object made on buildForm(), it is in charge of building the labels and input for each question, one by one.
    function buildInput(item, cn) {
        var label = '<label for="' + item.name + cn + '">' + item.label + '</label>';
        var input;
        if (item.type === "text") {
            input = '<input type="text" name="' + item.name + cn + '" id="' + item.name + cn + '" class="form-control"/>';
            return label + input;
        } else if (item.type === "select") {
            var options;
            $.each(item.options, function (i, op) {
                options += '<option value="' + op.value + '">' + op.text + '</option>';
            });
            input = '<select name="' + item.name + cn + '" id="' + item.name + cn + '" class="form-control">' + options + '</select>';
            return label + input;
        } else if (item.type === 'number') {
            input = '<input type="number" name="' + item.name + cn + '" id="' + item.name + cn + '" class="form-control"/>';
            return label + input;
        } else if (item.type === 'textarea') {
            input = '<textarea name="' + item.name + cn + '" id="' + item.name + cn + '" class="form-control"/>';
            return label + input;
        } else {
            return 'Couldn\'t create this input, probably there is no conditional for its type';
        }
    }

    // finally, you build the first form that is shown by default, let's say "Customer 1 form"
    buildForm(customer);
});

样本

这个小提琴： http://jsfiddle.net/tofs46o8/

您可以在评论中看到代码是自解释的，请阅读它们。

Answer 3

我将我的编码修改为

$("#add_cus").click(function(){
    var num = $('.clone_el').length;
    var newNum = new Number(num+1);
    var newClone = $("#cloner").clone().appendTo("#clone_wrap");

    newClone.attr('id',('cloner')+newNum).find("input, textarea, select, #cus_title").each(function(){

        var item = $(this);
        var type = this.type;
        var tag = this.tagName.toLowerCase();

        if(type=='text'||tag=='textarea'){
            item.attr('name', item.attr('name')+newNum).attr('id', item.attr('id')+newNum).val('');
        }
            else if(tag=='select'){
            item.attr('name', item.attr('name')+newNum).attr('id', item.attr('id')+newNum).selectedIndex=0;
            }
            else if(item.attr('id')=='cus_title'){
            item.text("Customer "+newNum);  
            }
        });
    });

我知道你们说我这样做的方式并不是最好的方法，但这会克隆我需要克隆的所有输入，并根据我的表格如何影响名称和ID建立。我感谢所有人的意见，并希望更多地了解给出的其他答案，因为它们看起来非常有用。

我与他们的问题是，当我看到它们是如何工作的时候，我并不完全明白我如何将我的div和他们的风格应用于格式加上它们看起来非常乏味。克隆字段集会自动克隆所有内容，我只需将代码集中在输入上即可。

如果有人发现任何问题请告诉我。截至目前，它正确克隆所有内容，我的PHP脚本可以正常使用它，没有任何错误，所以我对它的工作方式感到满意。再次感谢所有输入，因为我已经开始更多地研究角度js和json，并且可以看到应用它的价值。我现在无法承受时间重新构建一切。

如何使用JQuery清空克隆的输入？

3 个答案:

您的脚本存在一些问题：

TL;DR

详细信息（不是所有错误的完整列表）

HTML

的jQuery：

样本