How to create input type text dynamically

Question

I want to create an input type text in my web form dynamically  More specifically  I have a textfield where the user enters the number of desired text fields  I want the text fields to be generated dynamically in the same form    How do I do that

User · Answer

To create number of input fields given by the user

Get the number of text fields from the user and assign it to a variable.

var no = document.getElementById("idname").value

To create input fields, use createElement method and specify element name i.e. "input" as parameter like below and assign it to a variable.

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

Then assign necessary attributes to the variable.

textfield.type = "text";

textfield.value = "";

At last append variable to the form element using appendChild method. so that the input element will be created in the form element itself.

document.getElementById('form').appendChild(textfield);

Loop the 2,3 and 4 step to create desired number of input elements given by the user inside the form element.

for(var i=0;i<no;i++) {           
    var textfield = document.createElement("input");
    textfield.type = "text"; textfield.value = "";
    document.getElementById('form').appendChild(textfield);
}

Here's the complete code

_x000D_

function fun() {
    /*Getting the number of text fields*/
    var no = document.getElementById("idname").value;
    /*Generating text fields dynamically in the same form itself*/
    for(var i=0;i<no;i++) {
        var textfield = document.createElement("input");
        textfield.type = "text";
        textfield.value = "";
        document.getElementById('form').appendChild(textfield);
    }
}

_x000D_

<form id="form">
    <input type="type" id="idname" oninput="fun()" value="">
</form>

_x000D_

User · Answer

See this answer for a non JQuery solution  Just helped me out   Adding input elements dynamically to form

User · Answer

With JavaScript   var input   document createElement  input    input type    text   input className    css-class-name      set the CSS class container appendChild input      put it into the DOM

User · Answer

You could do something like this in a loop based on the number of text fields they enter       lt input  gt    attr  type  text  name  text  i   appendTo   myform      But for better performance I d create all the html first and inject it into the DOM only once   var count   20  var html       while count--      html push   lt input type  text  name  name   count     gt           myform   append html join         Edit this example uses jQuery to append the html  but you could easily modify it to use innerHTML as well

User · Answer

Try this   x000D   x000D  function generateInputs form  input      x   input value    for  y   0  x  gt  y  y          var element   document createElement  input        element type    text       element placeholder    New Input       form appendChild element         x000D  input     padding  10px    margin  10px    x000D   lt div id  input-form  gt     lt input type  number  placeholder  Desired number of inputs     onchange  generateInputs document getElementById  input-form    this   required gt  lt br gt   lt  div gt  x000D   x000D   x000D   The code above  has a form with an input which accepts a number in it   lt form id  quot input-form quot  gt     lt input type  quot number quot  placeholder  quot Desired number of inputs    quot  onchange  quot generateInputs document getElementById  input-form    this  quot  gt  lt br gt   lt  form gt   The input runs a function onchange  meaning that when the user has entered a number and clicked submit  it run a function  The user is required to fill out the input with a value before submitting  This value must be numerical  Once submitted the parent form and the input are passed to the function      generateInputs document getElementById  input-form    this       The generate then loops according to the given value inside the input      x   input value  for  y 0  x gt y  y           Then it generates an input inside the form  on each loop      var element   document createElement  input    element type    quot text quot   element placeholder    quot New Input quot   form appendChild element        I have also added in a few  CSS stylings to make the inputs look nice  and some placeholders as well  To read more about creating elements createElement     https   www w3schools com jsref met document createelement asp  To read more about for loops   https   www w3schools com js js loop for asp

User · Answer

lt button id  quot add quot  onclick  quot add   quot  gt Add Element lt  button gt    lt div id  quot hostI quot  gt  lt  div gt    lt template id  quot templateInput quot  gt       lt input type  quot text quot  gt   lt  template gt    lt script gt      function add                 Using Template  element is created         var templateInput   document querySelector   templateInput            var clone   document importNode templateInput content  true               The Element is added to document         var hostI   document querySelector   hostI            hostI appendChild clone           lt  script gt   HTML Templates are now the recommended standards to generate dynamic content

User · Answer

The core idea of the solution is   create a new input element Add the type text append the element to the DOM  This can be done via this simple script  var input   document createElement  input    input setAttribute  type    text    document getElementById  parent   appendChild input    Now the question is  how to render this process dynamic  As stated in the question  there is another input where the user insert the number of input to generate  This can be done as follows   x000D   x000D  function renderInputs el     var n   el value  amp  amp  parseInt el value  10     if isNaN n        return           var input    var parent   document getElementById  parent         cleanDiv parent     for var i 0  i lt n  i         input   document createElement  input        input setAttribute  type    text        parent appendChild input          function cleanDiv div     div innerHTML         x000D  Insert number of input to generate   lt  br gt   lt input type  text  onchange  renderInputs this    gt    lt div id  parent  gt  Generated inputs   lt  div gt  x000D   x000D   x000D   but usually adding just an input is not really usefull  it would be better to add a name to the input  so that it can be easily sent as a form  This snippet add also a name   x000D   x000D  function renderInputs el     var n   el value    var input  label    var parent   document getElementById  parent      cleanDiv parent        el value split      forEach function name       input   document createElement  input        input setAttribute  type    text        input setAttribute  name   name       label   document createElement  label        label setAttribute  for   name       label innerText   name      parent appendChild label       parent appendChild input       parent appendChild document createElement  br              function cleanDiv div     div innerHTML         x000D  Insert the names  separated by comma  of the inputs to generate   lt  br gt   lt input type  text  onchange  renderInputs this    gt   lt br gt  Generated inputs   lt  br gt   lt div id  parent  gt    lt  div gt  x000D   x000D   x000D

User · Answer

you can use ES6 back quits    x000D   x000D    var inputs     x000D            lt input type  checkbox  id  chbox0  onclick  checkboxChecked this    gt   lt input  type  text  class  noteinputs0 id  note    0      placeholder  task0  gt  lt button  id  notebtn0                       gt creat lt  button gt      lt input type  text  class  noteinputs  id  note    1      placeholder  task1  gt  lt button  class  notebuttons  id  notebtn1   gt creat lt  button gt      lt input type  text  class  noteinputs  id  note    2      placeholder  task2  gt  lt button  class  notebuttons  id  notebtn2   gt creat lt  button gt      lt input type  text  class  noteinputs  id  note    3      placeholder  task3  gt  lt button  class  notebuttons  id  notebtn3   gt creat lt  button gt      lt input type  text  class  noteinputs  id  note    4      placeholder  task4  gt  lt button  class  notebuttons  id  notebtn4   gt creat lt  button gt      lt input type  text  class  noteinputs  id  note    5      placeholder  task5  gt  lt button  class  notebuttons  id  notebtn5   gt creat lt  button gt      lt input type  text  class  noteinputs  id  note    6      placeholder  task6  gt  lt button  class  notebuttons  id  notebtn6   gt creat lt  button gt      lt input type  text  class  noteinputs  id  note    7      placeholder  task7  gt  lt button  class  notebuttons  id  notebtn7   gt creat lt  button gt      lt input type  text  class  noteinputs  id  note    8      placeholder  task8  gt  lt button  class  notebuttons  id  notebtn8   gt creat lt  button gt      lt input type  text  class  noteinputs  id  note    9      placeholder  task9  gt  lt button  class  notebuttons  id  notebtn9   gt creat lt  button gt   x000D        sort   join       x000D     document querySelector   hi   innerHTML      lt br gt    inputs  x000D   lt div id  hi  gt  lt  div gt  x000D   x000D   x000D

User · Answer

I think the following link will help you  If you want to generate fields dynamically and also want to remove them on the same time you can get the help from here  I had the same question  So i got the answer    function             var scntDiv       p scents            var i       p scents p   size     1               addScnt   live  click   function                         lt p gt  lt label for  p scnts  gt  lt input type  text  id  p scnt  size  20  name  p scnt     i     value    placeholder  Input Value    gt  lt  label gt   lt a href     id  remScnt  gt Remove lt  a gt  lt  p gt    appendTo scntDiv                   i                    return false                           remScnt   live  click   function                      if  i  gt  2                                this  parents  p   remove                            i--                                    return false                     http   jsfiddle net jaredwilli tZPg4 4

User · Answer

Query and get the container DOM element  Create new element  Put new element to document Tree     Query some Dib region you Created let container document querySelector  quot  CalculationInfo  row  t-Form-itemWrapper quot    let input   document createElement  quot input quot       create new Element  for apex input setAttribute  quot type quot   quot text quot    input setAttribute  quot size quot   quot 30 quot    containter appendChild input      put it into the DOM

User · Answer

You could use createElement   method for creating that textbox

User · Answer

Maybe the method document createElement    is what you re looking for

User · Answer

Using Javascript  all you need is document createElement and setAttribute   var input   document createElement  input    input setAttribute  type    text      Then you can use appendChild to append the created element to the desired parent element   var parent   document getElementById  parentDiv    parent appendChild input

[javascript] How to create <input type=“text”/> dynamically

To create number of input fields given by the user

Examples related to javascript

Examples related to html

Examples related to forms

Examples related to webforms