1

ユーザーが製品を追加できるようにするために使用しているコードがいくつかあります。追加する製品の数を制御したり、作成した製品を削除したりできます。私の問題は、私が使用しているコードでは、最初の入力の名前/IDだけでなく、2番目のdivのIDも変更できなかったことです。最初の入力だけでなく、すべての入力の名前を変更するにはどうすればよいですか?

ジャバスクリプト：

<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

4

1 に答える 1

2

私はそれを理解しました...私はここで見つけたものを微調整することができました: 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>
于 2013-03-18T17:47:35.670 に答える