Using Javascript to Create Forms

Question

I'm looking at creating a sweepstake generator and to do this am only using HTML and Javascript. I currently have users picking a 'select' option for the number of 'players' and then an onclick() event which creates that many 'name' boxes.

The code for this is:

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

with the 'makeform()' function looking like:

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

This works a treat but the problem comes when a user fills in the newly generated form. I included a submit bottom at the bottom of the 'overall form' (which includes the new form) but it doesn't seem to recognize the newly generated form.

I suppose I'm asking two questions: 1.) How do I make this work? Can you infinitely generate forms using Javascript or is there a limit? 2.) Is this the best way to do this? I'm sure it's not but don't really know what technology I should be looking at.

Thanks!

(By request - all the code:)

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

and:

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

In addition to the function already given above.

Answer 1

This doesn't work in principle because you can't nest forms. You'll need to add the fields to the parent form.

You could do this with plain JS, but I suggest you don't reinvent the wheel and learn to use a JS library instead -- such as jQuery. This would make your life much easier - it greatly simplifies DOM manipulation (and does much more). For example, you could just do the following:

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

It might look confusing at first, but a second look through this code shows you a lot of familiar things -- and the elegance of using something like this instead of the unwieldy beasts that are onclick and innerHTML.

Answer 2

There are a few things i've spotted:

1) You should be using the onchange event on the select rather than an onclick on the option - this makes it cross browser friendly and accessible - what happens if a user tabs to the select then uses the arrow keys to change the selection? onclick won't fire...

<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) Your form created via JavaScript doesn't have a closing tag or a submit button.

3) Your input elements don't have names, therefore no POST/GET data will be sent.

Try this:

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