1

これをよく検索しましたが、+1 -1 のソリューションしか見つかりません。しかし、次のような他の入力で入力の数を設定したい:

//Enter the number of inputs (1 is the start-value)
<input type="text" size="3" maxlength="3" id="count" name="count" value="1">

//Display that number of inputs (1 at start)
<input type="text" size="30" maxlength="30" id="input_1" name="input_1">

ユーザーが最初のフィールドに 5 を書き込むと、フォームは次のようになります。

//Enter the number of inputs (1 is the start-value)
<input type="text" size="3" maxlength="3" id="count" name="count" value="1">

//Display that number of inputs (1 at start)
<input type="text" size="30" maxlength="30" id="input_1" name="input_1">
<input type="text" size="30" maxlength="30" id="input_2" name="input_2">
<input type="text" size="30" maxlength="30" id="input_3" name="input_3">
<input type="text" size="30" maxlength="30" id="input_4" name="input_4">
<input type="text" size="30" maxlength="30" id="input_5" name="input_5">

どうすればこれを作ることができますか？js を使用する必要がありますか?

4

5 に答える 5

1

はい、その場で動的に行うにはjsを使用する必要があります jQueryタグがあるので、jQueryで例を示します

これは最良の例ではありませんが、機能し、出発点です

JS:

$(function(){
    $('#master').on('change', function() {
        var count = $(this).val();
        $('#otherInputs').html('')
        for( var i = 0; i < count; i++) {
           $('#otherInputs').append(
               $('<input>', {type: 'text'})
           );
        }
    });

});

HTML:

<input type="number" id="master" value="1">
<div id="otherInputs"></div>

デモ

これを英語で言うと…

あなたchange #masterが空にするとき#master( ) ループスルーし、の値html('')に応じて新しい入力を追加します#master

于 2013-07-18T10:22:43.597 に答える
1

フレームワークを使用しない単純な JavaScript スニペットを次に示します。

function addInputs() {
    var count = parseInt(document.getElementById("count").value);
    for (var i = 2; i <= count; i++) {
        document.getElementById('moreinputs').innerHTML += '<input type="text" name="input_' + i + '" id="input_' + i + '" />';
    }
}

この例では、ID が「moreinputs」のコンテナー (div) を追加する必要があります。ただし、この関数を複数回呼び出すと、正常に動作しません (例: 入力数を増やすことしかできず、減らすことはできません)。

于 2013-07-18T10:34:43.160 に答える
1

はい、JavaScript を使用するか、フォームをサーバーに送信します。サーバーでは、すべての入力を含む新しい html ページが生成されます (例: PHP を使用)。

于 2013-07-18T10:14:59.350 に答える