Adding input elements dynamically to form

Faith Dev answered on December 23, 2021 Popularity 9/10 Helpfulness 3/10

answer Adding input elements dynamically to form

Adding input elements dynamically to form

Comment

Tip Faith Dev 1 GREPCC

<html>
<head>
    <script type='text/javascript'>
        function addFields(){
            // Number of inputs to create
            var number = document.getElementById("member").value;
            // Container <div> where dynamic content will be placed
            var container = document.getElementById("container");
            // Clear previous contents of the container
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }
            for (i=0;i<number;i++){
                // Append a node with a random text
                container.appendChild(document.createTextNode("Member " + (i+1)));
                // Create an <input> element, set its type and name attributes
                var input = document.createElement("input");
                input.type = "text";
                input.name = "member" + i;
                container.appendChild(input);
                // Append a line break 
                container.appendChild(document.createElement("br"));
            }
        }
    </script>
</head>
<body>
    <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
    <div id="container"/>
</body>
</html>
 Run code snippet

xxxxxxxxxx

<html>

<head>

    <script type='text/javascript'>

        function addFields(){

            // Number of inputs to create

            var number = document.getElementById("member").value;

            // Container <div> where dynamic content will be placed

            var container = document.getElementById("container");

            // Clear previous contents of the container

            while (container.hasChildNodes()) {

                container.removeChild(container.lastChild);

            for (i=0;i<number;i++){

                // Append a node with a random text

                container.appendChild(document.createTextNode("Member " + (i+1)));

                // Create an <input> element, set its type and name attributes

                var input = document.createElement("input");

                input.type = "text";

                input.name = "member" + i;

                container.appendChild(input);

                // Append a line break

                container.appendChild(document.createElement("br"));

    </script>

</head>

<body>

    <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />

    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>

    <div id="container"/>

</body>

</html>

 Run code snippet

Popularity 9/10 Helpfulness 3/10 Language whatever

Source: stackoverflow.com

Tags: elements input whatever

Link to this answer
Share Copy Link

Contributed on Dec 23 2021

Faith Dev

0 Answers Avg Quality 2/10

Adding input elements dynamically to form

Contents

More Related Answers

Adding input elements dynamically to form

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.