0

登録フォームを作成しようとしています。この登録フォームは「address1」というテキスト ボックスとして表示され、その近くに「Add Address」というボタンがあります。ボタンの機能 - より多くのアドレス用のテキスト ボックスを追加します。前のアドレス ボックスの近くにあるボタンが [削除] に変わり、アドレス ボックスとボタンが削除されます。問題は、テキスト ボックスを 1、2、3、... の順に設定する必要があることです。名前と ID を変更する必要があります。たとえば、アドレスボックス番号 4 (name, id="address4") を削除すると、次のすべてのテキスト ボックスの名前と ID が 1 減ります。これを for ループで実行しようとします。これは説明するのが難しいので、コードだけを示します。VS で「document.getElementById("address"+n)」のように記述してみてください。そして、あなたもそうではないことがわかります' 取得したリストで、ドット ID、名前、または値の後に書き込むことができることがわかります。これには変数があるためだと気づきました。これが問題だと思います。コードは次のとおりです。

<html>
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
        var n1 = 1; //counting the buttons and divs. doesn't decrease. 
                    //In another words - it counts the number of calls to Add()
        var n3 = 1; //counting the address text fields. 
                    //It being reduced and increased so that it will represent the exact number of text fields
        function Add() {
            n1++;
            n3++;
                s1 = "<div id='div" + n1 + "'>";
                s1 += "Address <input type='text' name='address" + n3 + "' id='address" + n3 + "' />";
                s1 += "<input type='button' name='add" + n1 + "' id='add" + n1 + "' value='Add Branch' onclick='Add();' /><br />";
                s1 += "</div>";
                var n2 = n1 - 1;
                document.getElementById('div' + n2).insertAdjacentHTML('afterEnd', s1);
                document.getElementById('add' + n2).onclick = function () { Remove(n2, (n3-1)); };
                document.getElementById('add' + n2).value = 'Remove';
        }
        function Remove(nn1, nn2) { //nn1 - div number to remove. nn2 - the address field number in this div
            var parent = document.getElementById('barcode');
            var child = document.getElementById('div' + nn1);
            parent.removeChild(child);
            for (nn2 += 1; nn2 <= n3; nn2++) {
                var n2 = nn2 - 1; //nn2 - current address text field. n2 - the new number for the address field
                document.getElementById('address' + nn2).setAttribute('name', 'address' + n2);
                document.getElementById('address' + nn2).setAttribute('id', 'address' + n2);
                document.getElementById('address' + n2).setAttribute('value', 'address' + n2);
                // try: document.getElementById('address' + nn2).name='address'+n2. doesn't work (for me)
            }
            n3--;
        }
        var check = false;
    </script>
</head>
<body>
    <form name='barcode' id='barcode' action="" >
        <div id='div1'>
        Address <input type='text' name='address1' id='address1' />
        <input type='button' name='add1' id='add1' value='Add Branch' onclick='Add();' /><br />
        </div></form>
</body>
</html>

ご迷惑をおかけして申し訳ありません:)このコードには、アドレスフィールドにリンクしているものだけを残し、コメントを追加しました。どうもありがとう！

編集: 既に修正しようとしたため、このコードにバグが表示されないことを忘れていました。コードを変更する前に、すべての div、テキスト フィールド、および追加/削除ボタンを並べ替えたため、既存のすべての項目には常に順番に番号が付けられます (1、2、3、...)。次のコードの問題は、追加ボタンを 2 回クリックし、最初のアドレス フィールドを削除してから追加ボタンをもう一度クリックすると発生します。

<html>
<head>
    <script type="text/javascript">
        var n1 = 1;
        function Add() {
                n1++;
                s1 = "<div id='div" + n1 + "'>";
                s1 += "Address <input type='text' name='address" + n1 + "' id='address" + n1 + "' />";
                s1 += "<input type='button' name='add" + n1 + "' id='add" + n1 + "' value='Add Branch' onclick='Add()' /><br />";
                s1 += "</div>";
                var n2 = n1 - 1;
                document.getElementById('div' + (n2)).insertAdjacentHTML('afterEnd', s1);
                document.getElementById('add' + (n2)).onclick = function () { Remove(n2); };
                document.getElementById('add' + (n2)).value = 'Remove';
        }
        function Remove(n) {
            var parent = document.getElementById('barcode');
            var child = document.getElementById('div' + n);
            parent.removeChild(child);
            for (n += 1; n <= n1; n++) {
                var n2 = n1 - 1;
                document.getElementById('add' + n).onclick = function () { Remove(n2); };
                document.getElementById('address' + n).setAttribute('name', 'address' + n2);
                document.getElementById('add' + n).setAttribute('name', 'add' + n2);
                document.getElementById('address' + n).setAttribute('id', 'address' + n2);
                document.getElementById('add' + n).setAttribute('id', 'add' + n2);
                document.getElementById('div' + n).setAttribute('id','div' + n2);
            }
            n1--;
            document.getElementById('add' + n1).onclick = function () { Add() };
        }
    </script>
</head>
<body>
    <form name='barcode' id='barcode' action="" >
            <div id='div1'>
            Address <input type='text' name='address1' id='address1' />
            <input type='button' name='add1' id='add1' value='Add Branch' onclick='Add();' /><br />
            </div>
       </form>
</body>
</html>
4

1 に答える 1

2

アドレスの順序を維持するのに少し苦労していると思いますが、それを行う一般的な理由がわかりません（もしある場合は、質問に追加してください）。

あなたが行っているように一意のインデックスで入力を追加すると、それらは常に異なり、順序付けられます。

できることは次のとおりです。

イベント呼び出し元を関数 Add および Remove に渡し、内部でこれらの要素に必要な変更を加えることができます。

たとえば、Remove関数 (で呼び出すRemove(this);) は次のようになります。

function Remove(callerButton) { 
    var parent = document.getElementById('barcode');

    var child = callerButton.parentNode;
    // child is the DIV you want to remove
    parent.removeChild(child);
    n3--;
}

この方法では、現在行っているすべての並べ替えを行う必要はありません。

最後に、次の方法で残りのすべての要素にアクセスできます。

var addresses = document.getElementById("barcode").getElementsByTagName("input");

for(var i = 0; i < addresses.length; i++) {
    if(addresses[i].type == "text") {
        // I'm printing them in the console, you can do with it whatever you like
        // If you want to exclude the one with "Add Branch in front of it you can validate for address+n1
        console.log("Element.id : " + addresses[i].id + " - Element.value: "+ addresses[i].value );
    }
}

これらの変更を加えてjsFiddleを追加しました (フォームの残りのフィールドを表示する送信ボタンを追加しました)。

問題が解決するかどうかを確認してください。

于 2013-07-26T00:40:32.400 に答える