0

要素を静的に追加するが、設計時には見えず、何らかのイベントが発生したときに動的に表示する方法。この場合、私はこれらのようなコード HTML を使用します

<input type="text" name="field_1"/>
<input type="text" name="field_2"/>
<input type="text" name="field_3"/>
<input type="text" name="field_4" style="display:none"/>
<input type="text" name="field_5" style="display:none"/>
<a href="#">add another field</a>

最初、field_4 と field_5 は見えませんよね？しかし、「別のフィールドを追加」をクリックすると、field_4 と field_5 が表示されます。

ヒントはありますか？

誰かが PHP でこのケースを解決できるかどうかは気にしません。おそらく、このケースは FB のようなものです。連絡先情報 (電話番号) を入力すると、番号が 1 つしかない場合、「別の電話を追加」をクリックする必要はありませんが、 2 つ以上の数字がある場合は、それをクリックすると、クリックした数だけフィールド テキストが表示されます。

4

2 に答える 2

1

まず第一に、これらの隠しフィールドは必要ありません。それは「動的に追加する」ことではありません。

<input type="text" name="field_1"/>
<input type="text" name="field_2"/>
<input type="text" name="field_3"/>
<a href="#">add another field</a>

次に、クリックされたときに JavaScript 関数を実行するようにリンクに指示します。

<a href="javascript:void()" onclick="addField(e)">add another field</a>

あなたのJavaScriptを書いてください：

;(function) {
    var counter = 3; //This is set to the number of initial fields.

    function addField(e) {
        e = e || window.event; //Normalize the event.

        counter++; //Increment the counter.

        //Create the new element.
        var element = document.createElement("input");
        element.setAttribute("type", "text");
        element.setAttribute("name", "field_" + counter);

        //Insert it before your link.
        e.target.parentNode.insertBefore(element, e.target);
    }
 })();
于 2013-02-19T13:16:05.960 に答える
1 
document.getElementById('field_4').display = 'inline'

それはあなたの目的のために働くはずです。

ただし、古い非表示の要素を表示する代わりに、ボタンをクリックすると新しい要素を追加できます。

var index = 2;
document.getElementById('addBtn').addEventListener('click', function() {
    var inp = document.createElement('input')
    inp.setAttribute('type', 'text')
    inp.setAttribute('name', 'field_' + index)
    document.insertBefore(inp, document.getElementById('addBtn'))
    index ++;
})
于 2013-02-19T13:11:28.197 に答える