Question

我有一些代码可供用户添加产品。他们可以控制添加的产品数量，以及删除他们创建的产品。我的问题是，使用我正在使用的代码，我只能设法能够更改第二个div的id以及第一个输入的名称/ id。如何更改所有输入的名称，而不仅仅是第一个输入？

javascript：

<script type="text/javascript">
    $(document).ready(function() {
        $('#add').click(function() {
            var num     = $('.clonedInput').length;
            var newNum  = new Number(num + 1);

            var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

            newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);

            $('#input' + num).after(newElem);
            $('#remove').attr('disabled','');
        });

        $('#remove').click(function() {
            var num = $('.clonedInput').length;

            $('#input' + num).remove();
            $('#add').attr('disabled','');

            if (num-1 == 1)
                $('#remove').attr('disabled','disabled');
        });

        $('#remove').attr('disabled','disabled');
    });
</script>

表格：

<form id="myForm">
    <div id="input1" class="clonedInput">
        <p>Product Name: <input type="text" name="name1" id="name1" /></p>
        <p>Product Description:</p>
        <textarea rows="10" cols="50" name="desc1" id="desc1"></textarea>
        <p>Brand Name: <input type="text" name="brand1" id="brand1" /></p>
        <p>Product Code Number: <input type="text" name="code1" id="code1" /></p>
        <p>West Texas Co-op Bid Product Number (if different from the Product Code Number): <input type="text" name="coop1" id="coop1" /></p>
        <p>Commodity processing availability:</p>
        <p><input type="checkbox" name="yes" id="yes1" value="Yes"> Yes <input type="checkbox" name="no" id="no1" value="No"> No</p>
        <p>If yes, what is the commodity processing code number?: <input type="text" name="comm1" id="comm1" /></p>
    </div>

    <div>
        <input type="button" id="add" value="Add Product" />
        <input type="button" id="remove" value="Remove Product" />
    </div>
</form>

实例：http://test.joshrodg.com/wp-content/themes/rodgersconsulting/test.php

Answer 1

我想通了......我能够调整我在这里找到的内容：http://jsfiddle.net/e6cwd/9/

JQuery：
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>

JavaScript：

<script type="text/javascript">
    $(document).ready(function() {
        $("#btnAdd").click(function() {
            var num     = $(".clonedSection").length;
            var newNum  = new Number(num + 1);

            var newSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);

            newSection.children(":first").children(":first").attr("id", "name" + newNum).attr("name", "name" + newNum);
            newSection.children(":nth-child(3)").children(":first").attr("id", "desc" + newNum).attr("name", "desc" + newNum);
            newSection.children(":nth-child(4)").children(":first").attr("id", "brand" + newNum).attr("name", "brand" + newNum);
            newSection.children(":nth-child(5)").children(":first").attr("id", "code" + newNum).attr("name", "code" + newNum);
            newSection.children(":nth-child(6)").children(":first").attr("id", "coop" + newNum).attr("name", "coop" + newNum);
            newSection.children(":nth-child(7)").children(":first").attr("id", "yes" + newNum).attr("name", "yes" + newNum);
            newSection.children(":nth-child(7)").children(":nth-child(2)").attr("id", "no" + newNum).attr("name", "no" + newNum);
            newSection.children(":nth-child(8)").children(":first").attr("id", "comm" + newNum).attr("name", "comm" + newNum);

            $(".clonedSection").last().append(newSection)

            $("#btnDel").attr("disabled","");

            if (newNum == 5)
                $("#btnAdd").attr("disabled","disabled");
        });

        $("#btnDel").click(function() {
            var num = $(".clonedSection").length; // how many "duplicatable" input fields we currently have
            $("#clonedSection" + num).remove();     // remove the last element

            // enable the "add" button
            $("#btnAdd").attr("disabled","");

            // if only one element remains, disable the "remove" button
            if (num-1 == 1)
                $("#btnDel").attr("disabled","disabled");
        });

        $("#btnDel").attr("disabled","disabled");
    });
</script>

HTML：

<form id="myForm">
    <div id="clonedSection1" class="clonedSection">
        <p>Name: <input type="text" name="name" id="name" /></p>
        <p>Product Description:</p>
        <p><textarea rows="10" cols="50" name="desc" id="desc"></textarea></p>
        <p>Brand Name: <input type="text" name="brand" id="brand" /></p>
        <p>Product Code Number: <input type="text" name="code" id="code" /></p>
        <p>West Texas Co-op Bid Product Number (if different from the Product Code Number): <input type="text" name="coop" id="coop" /></p>
        <p>Commodity processing availability: <input type="checkbox" name="yes" id="yes" value="Yes"> Yes <input type="checkbox" name="no" id="no" value="No"> No</p>
        <p>Commodity processing code number (if applicable): <input type="text" name="comm" id="comm" /></p>
    </div>
    <div>
        <input type="button" id="btnAdd" value="add another name" />
        <input type="button" id="btnDel" value="remove name" />
    </div>
</form>

重复的表单字段

1 个答案: