How can i create dynamic/multiple <textarea> using JavaScript

Question

I want to add multiple textarea using Javascript as a user input number of description in no_of_description input HTML tags.

Here is my code:

<div class="container">

  <label for="no_of_description">No of Description</label>
  <input type="number" id="no_of_description" name="no_of_description" value="1">
  
  <hr/>

  <form class="form" action="" method="POST">
    <!-- if  no_of_description is 1 (default)-->
    <div class="form-group">
      <label for="description_1">Description 1</label>
      <textarea class="form-control" id="description_1" rows="3" cols="8"></textarea>
    </div>
    
    <!-- if no_of_description is 2, another description be added using javascript-->
    
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

</div>

Answer 1

Follo Below way to create html form field dynamically.

 <html>
<head>
    <script type='text/javascript'>
        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("TextBox " + (i+1)));
                var input = document.createElement("input");
                input.type = "text";
                input.name = "member" + i;
                container.appendChild(input);
                container.appendChild(document.createElement("br"));
            }
        }
    </script>
</head>
<body>
    <input type="text" id="member" name="member" value="">Number of TextBox:<br />
    <a href="#" id="filldetails" onclick="addFields()">Add</a>
    <div id="container"/>
</body>
</html>

How can i create dynamic/multiple <textarea> using JavaScript

Question

1 answers

solution1
0 ACCPTED 2020-10-06 06:28:12

How can i create dynamic/multiple <textarea> using JavaScript

Question

1 answers

solution1 0 ACCPTED 2020-10-06 06:28:12

solution1
0 ACCPTED 2020-10-06 06:28:12