使用Javascript创建表单

我正在考虑创建一个抽奖生成器，为此我只使用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>

此次抽奖涉及多少人？
2.
3.
4.
5.
6.
7.
8.
9
10

“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;
}

函数makeform（numberOfPlayers）{
var x=“”；
对于（i=0；i

这是一种处理方式，但当用户填写新生成的表单时，问题就出现了。我在“整体表单”（包括新表单）的底部添加了一个submit底部，但它似乎无法识别新生成的表单

我想我要问两个问题： 1）我如何使其工作？您可以使用Javascript无限地生成表单，还是有限制？ 2.）这是最好的方法吗？我肯定不是，但我真的不知道我应该看什么技术

谢谢

（根据请求-所有代码：）

有多少队参与？
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
有多少人参与了这次抽奖？
2.
3.
4.
5.
6.
7.
8.
9
10

以及：

函数makeform1（numberofTeams）{
变量y=“”；
对于（j=0；jy+='这在原则上不起作用，因为您不能嵌套表单。您需要将字段添加到父表单中

你可以用普通的JS来实现这一点，但我建议你不要重新发明轮子，而是学习使用JS库——比如jQuery。这将使你的生活更加轻松——它大大简化了DOM操作（并且做得更多）。例如，你可以做以下事情：

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

$（“#playerNumber选项”）。单击（函数（）{
var p=$（“玩家名称”）；
对于（var i=0；i<$（this）.attr（“value”）；i++）
p、 追加（“
”）；//等
})

一开始可能会让人困惑，但再看一遍这段代码，你会发现很多熟悉的东西——使用这样的东西，而不是像
onclick
和
innerHTML
那样笨重的野兽，这是一种优雅，我发现了一些东西：

1） 您应该在select上使用onchange事件，而不是在选项上使用onclick-这使其跨浏览器友好且可访问-如果用户在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.
3.
4.
5.
6.
7.
8.
9
10

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;
}

函数makeform（numberOfPlayers）{
var x=“”；
对于（i=0；i
这都是你的代码吗？如果你能看看你是如何添加提交按钮的，以及你为什么不添加标签的，那就太好了。不要用你的讽刺来阻止OP。也许他刚开始玩javascript。相反，我正试着鼓励OP并为他们指出正确的方向。javascript仍然是javascript，即使是h jQuery——它只是方便多了。请放心，我不会感到气馁：）事实上，我正朝着一个好的jQuery教程的方向前进。这对你很好：）一旦你对jQuery感到满意，就不要害怕看一看——一个用于jQuery只是额外重量的场合的单用途框架集合：）
<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>

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;
}