Getting set amount of input fields based on an int in an object

Question

I have an object with information. I want to be able to create multiple of the same 2 input fields in html based on the object's number in a specific attribute.

So if the object contains the number 4, i want to write these 2 lines, 4 times.

<input type="text" placeholder="Enter First Name" />
<input type="text" placeholder="Enter Last Name" />

Is there any easy way to do that in javascript/jquery?

What about their identities(no id? or name) and events??If that's all you want then go with appending using `innerHTML` — Vinay, Dec 01 '16 at 15:18

score 0 · Answer 1 · edited May 23 '17 at 12:30

You can try something like this.

        function addFields(){
            var number = document.getElementById("member").value;
            var container = document.getElementById("container");
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }
            for (i=0;i<number;i++){
                container.appendChild(document.createTextNode("Member " + (i+1)));
                var input = document.createElement("input");
                input.type = "text";
                container.appendChild(input);
                container.appendChild(document.createElement("br"));
            }
        }

<input type="text" id="member" name="member" value="">Number of times<br />
<a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
    <div id="container"/>

You can see the answer here

Getting set amount of input fields based on an int in an object

1 Answers1