0

私は懸賞ジェネレーターを作成することを検討しています。これを行うには、HTMLとJavascriptのみを使用します。私は現在、ユーザーに「プレーヤー」の数の「選択」オプションを選択してから、その数の「名前」ボックスを作成するonclick（）イベントを選択しています。

このためのコードは次のとおりです。

<label for="playerNumbers">How many people are involved in the sweepstake?</label>
<select id="playerNumbers" name="playerNumbers">
<option value="2" onclick="makeform(2)"> 2 </option>
<option value="3" onclick="makeform(3)"> 3 </option>
<option value="4" onclick="makeform(4)"> 4 </option>
<option value="5" onclick="makeform(5)"> 5 </option>
<option value="6" onclick="makeform(6)"> 6 </option>
<option value="7" onclick="makeform(7)"> 7 </option>
<option value="8" onclick="makeform(8)"> 8 </option>
<option value="9" onclick="makeform(9)"> 9 </option>
<option value="10" onclick="makeform(10)"> 10 </option>
</select>

'makeform（）'関数は次のようになります。

function makeform(numberOfPlayers) {
var x = '<form id="playerNames">';
for (i = 0; i < numberOfPlayers; i++) {
    x += '<label for="player'+(i+1)+'">Player '+(i+1)+'</label>';
    x += '<input type="text" id="player'+(i+1)+'" />';
    x += '<br />';
}
document.getElementById("newForm").innerHTML = x;
}

これは扱いますが、ユーザーが新しく生成されたフォームに入力すると問題が発生します。「全体フォーム」（新しいフォームを含む）の下部に送信ボトムを含めましたが、新しく生成されたフォームを認識していないようです。

私は2つの質問をしていると思います：1。）これをどのように機能させるのですか？Javascriptを使用してフォームを無限に生成できますか、それとも制限がありますか？2.）これはこれを行うための最良の方法ですか？そうではないと確信していますが、私がどのテクノロジーを検討すべきかはよくわかりません。

ありがとう！

（リクエストにより-すべてのコード:)

<form id="nameForm">
<div id="teamForm">
<label for="teamNumber">How many teams are involved?</label>
<select id="teamNumber" name="teamNumber">
<option value="2" onclick="makeform1(2)"> 2 </option>
<option value="3" onclick="makeform1(3)"> 3 </option>
<option value="4" onclick="makeform1(4)"> 4 </option>
<option value="5" onclick="makeform1(5)"> 5 </option>
<option value="6" onclick="makeform1(6)"> 6 </option>
<option value="7" onclick="makeform1(7)"> 7 </option>
<option value="8" onclick="makeform1(8)"> 8 </option>
<option value="9" onclick="makeform1(9)"> 9 </option>
<option value="10" onclick="makeform1(10)"> 10 </option>
<option value="11" onclick="makeform1(11)"> 11 </option>
<option value="12" onclick="makeform1(12)"> 12 </option>
<option value="13" onclick="makeform1(13)"> 13 </option>
<option value="14" onclick="makeform1(14)"> 14 </option>
<option value="15" onclick="makeform1(15)"> 15 </option>
<option value="16" onclick="makeform1(16)"> 16 </option>
<option value="17" onclick="makeform1(17)"> 17 </option>
<option value="18" onclick="makeform1(18)"> 18 </option>
<option value="19" onclick="makeform1(19)"> 19 </option>
<option value="20" onclick="makeform1(20)"> 20 </option>
<option value="21" onclick="makeform1(21)"> 21 </option>
<option value="22" onclick="makeform1(22)"> 22 </option>
<option value="23" onclick="makeform1(23)"> 23 </option>
<option value="24" onclick="makeform1(24)"> 24 </option>
<option value="25" onclick="makeform1(25)"> 25 </option>
<option value="26" onclick="makeform1(26)"> 26 </option>
<option value="27" onclick="makeform1(27)"> 27 </option>
<option value="28" onclick="makeform1(28)"> 28 </option>
</select>
<div id="newForm2"></div>
</div>
<label for="playerNumbers">How many people are involved in the sweepstake?</label>
<select id="playerNumbers" name="playerNumbers">
<option value="2" onclick="makeform(2)"> 2 </option>
<option value="3" onclick="makeform(3)"> 3 </option>
<option value="4" onclick="makeform(4)"> 4 </option>
<option value="5" onclick="makeform(5)"> 5 </option>
<option value="6" onclick="makeform(6)"> 6 </option>
<option value="7" onclick="makeform(7)"> 7 </option>
<option value="8" onclick="makeform(8)"> 8 </option>
<option value="9" onclick="makeform(9)"> 9 </option>
<option value="10" onclick="makeform(10)"> 10 </option>
</select>
<div id="newForm"></div>
<input type="submit" value="Submit Form" onclick="doSweepstake(this.form)" />
</form>

と：

function makeform1(numberofTeams) {
var y = '<form id="teamNames">';
for (j = 0; j < numberofTeams; j++) {
    y += '<label for="team'+(j+1)+'">Team '+(j+1)+'</label>';
    y += '<input type="text id="team'+(j+1)+'" />';
    y += '<br />';
}
document.getElementById("newForm2").innerHTML = y;
}

上記の機能に加えて。

4

2 に答える 2

1

フォームをネストできないため、これは原則として機能しません。親フォームにフィールドを追加する必要があります。

プレーンなJSでこれを行うこともできますが、車輪の再発明をせずに、代わりにjQueryなどのJSライブラリの使用方法を学ぶことをお勧めします。これはあなたの生活をはるかに楽にします-それはDOM操作を大幅に簡素化します（そしてはるかに多くのことをします）。たとえば、次のようにすることができます。

$("#playerNumbers option").click(function() {
    var p = $("#playerNames");
    for (var i = 0; i < $(this).attr("value"); i++)
        p.append('<label><input /></label><br />'); // etc
})

最初は紛らわしいように見えるかもしれませんが、このコードをもう一度見ると、多くの馴染みのあるものがわかります。そして、扱いにくい獣の代わりにこのようなものを使用することの優雅さを示していonclickますinnerHTML。

于 2012-06-19T09:35:20.917 に答える
1

私が見つけたことがいくつかあります：

1）オプションをonclickするのではなく、selectでonchangeイベントを使用する必要があります。これにより、ブラウザ間で使いやすく、アクセスしやすくなります。ユーザーがselectにタブで移動し、矢印キーを使用して選択を変更するとどうなりますか？onclickは起動しません...

<select id="playerNumbers" name="playerNumbers" onchange="makeform(this.options[this.selectedIndex].value)">
    <option value="2"> 2 </option>
    <option value="3"> 3 </option>
    <option value="4"> 4 </option>
    <option value="5"> 5 </option>
    <option value="6"> 6 </option>
    <option value="7"> 7 </option>
    <option value="8"> 8 </option>
    <option value="9"> 9 </option>
    <option value="10"> 10 </option>
</select>

2）JavaScriptで作成されたフォームには、終了タグや送信ボタンがありません。

3）入力要素に名前がないため、POST/GETデータは送信されません。

これを試して：

function makeform(numberOfPlayers) {
    var x = '<form id="playerNames">';
    for (i = 0; i < numberOfPlayers; i++) {
        x += '<label for="player'+(i+1)+'">Player '+(i+1)+'</label>';
        x += '<input type="text" id="player'+(i+1)+'" name="player[]" />';
        x += '<br />';
    }
    x += '<input type="submit" name="submit" value="Submit" />';
    x += '</form>';
    document.getElementById("newForm").innerHTML = x;
}
于 2012-06-19T09:43:32.150 に答える