CODEWITHSUNDEEP
javascripthtml
SinTek Solutions
SinTek Solutions

Reputation: 115

Add a specific number of input fields

I'm sure this is a simple mistake on my end but I cannot figure it out. I want users to be able to enter a number in a form field, click a button, then that many fields will be created. Here is my HTML and JavaScript so far. The removeChild works but it will not add fields:

<body>
<script language="javascript">
function addFields(){
    var numFields = document.getElementById("numParts").value;
    var theContainer = document.getElementById("partsList");
    //document.write(numFields);
    while (theContainer.hasChildNodes()) {
        theContainer.removeChild(theContainer.lastChild);
    }
    for(i=0;i<numFields;i++){
        var input = document.createElement("input");
        input.type = "text";
        input.name = "participant" + i;
        theContainer.appendChild("input");
        theContainer.appendChild(document.createElement("br"));
    }
}
</script>
<form name="enterFields">
    <input type="text" id="numParts" />
    <input type="button" value="Add" onClick="addFields();" />
<div id="partsList">
<input type="text" />
</div>
</form>
</body>

Upvotes: 1

Views: 125

Answers (1)

musefan
musefan

Reputation: 48415

The problem is that when you try to add the input with appendChild you are specifying a string, when you should be passing the actual element.

This is what you want (note the lack of quotes):

theContainer.appendChild(input);

Here is a working example

Upvotes: 2

Related Questions