5

入力のリストがある Web フォームを作成しています。ここまでは順調ですね。

ただし、リンク/ボタンを追加して、さらに 5 つのフィールドをリストに追加するにはどうすればよいですか。例えば：

<input>
<input>
<input>
<input>

<a href="" onclick="">Add 10 more fields</a>

私はこのサイトで多くの同様の質問を見てきましたが、複数のフィールドを追加する方法を説明しているようには見えません.

助けてくれてありがとう、

ハーレー

編集：助けてくれてありがとう、jquery appendが道のりのようです。ただし、jquery を使用しない代替手段に感謝します。

4

7 に答える 7

6 
  $("#anyDiv").html('<input id="id1"/>');

....

 $("#anyDiv").append('<input id="id2"/>');
于 2012-07-13T16:35:28.260 に答える
2

あなたはすでに答えを持っていますが、jQuery以外のソリューションを提供しようと思いました：

function addInput(insertAt, formEl, num, inputType, defaultVal) {
    console.log(formEl);
    if (!formEl) {
        return false;
    }
    else {
        num = num ? num : 5;
        var fieldset = document.createElement('fieldset'),
            newInput;
        for (var i = 0; i < num; i++) {
            newInput = document.createElement('input');
            newInput.value = defaultVal || '';
            newInput.type = inputType || 'text';
            fieldset.appendChild(newInput);
        }
        formEl.insertBefore(fieldset, insertAt);
    }
}

var formEl = document.getElementById('theForm'),
    aElem = document.getElementById('aElement');

if (window.addEventListener) {
    // up to date browsers
    aElement.addEventListener('click', function() {
        addInput(this, formEl, 10);
    }, false);
} else if (window.attachEvent) {
    // legacy IE, <9
    aElement.attachEvent('onclick', function() {
        addInput(this, formEl);
    });
}​

JS フィドルのデモ。

テストするIEはありませんが、上記はフォールバックを使用してIE < 9で動作するはずattachEventであり、> = 9は標準を実装していると思いますaddEventListener().

参考文献:

于 2012-07-13T17:14:45.557 に答える
2

これは、jQuery のappend()関数を使用して 10 個の入力を追加する例を示すjs フィドルです。ただし、user1301840 の例のように、クリックごとに 1 つの追加のみを行うことをお勧めします。

HTML

<div id="inputList"></div>
<input type="button" value="Add 10 Inputs" id="addInputs" />​

Javascript

$('#addInputs').click(function() {
    for (i = 0; i < 10; i++) {
        $('#inputList').append('<input type="text" />');

    }
});​
于 2012-07-13T16:36:22.143 に答える
1

JQuery .append()関数を使用してみてください

$("a").click(function(e){
 $("form").append("<input />");
})
于 2012-07-13T16:33:57.793 に答える
1

はい、jquery はここに行く方法です。 

$("<input type='text'>").appendTo("#someContainer");

幸運を。

于 2012-07-13T16:39:36.980 に答える