Dynamically adding HTML form fields based on a number specified by the user

Question

I've a form field named Number of messages, and based on what number the user specifies, I want the exact number of text fields to be dynamically generated below to allow users to enter specified number of messages.

I have browsed through some examples where JQuery is used to generate dynamic form fields, but since I'm not acquainted with JQuery, those examples are a bit too complex for me to grasp. I do know the basics of JavaScript, and would really appreciate if I could find a solution to my query using JavaScript.

score 2 · Accepted Answer · answered Aug 13 '15 at 12:32

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

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

        var input = document.createElement("input");
        input.type = "text";
        container.appendChild(input);
        container.appendChild(document.createElement("br"));
    }
}

and html code will be

    Number of members:<input type="text" id="member" name="member" value=""><br />
<button id="btn" onclick="addinputFields()">Button</button>
    <div id="container"/>

fiddle here

Marking this as the answer just because this was the simplest of all the solutions posted here. Thanks for this. — Manas Chaturvedi, Aug 13 '15 at 14:16

Aruna Tebel · Answer 2 · 2015-08-13T13:45:20.517

You can try something similar to this...

var wrapper_div = document.getElementById('input_set');
var btn = document.getElementById('btn');

btn.addEventListener('click', function() {
  var n = document.getElementById("no_of_fields").value;
  var fieldset = document.createElement('div'),
    newInput;
  for (var k = 0; k < n; k++) {

    newInput = document.createElement('input');
    newInput.value = '';
    newInput.type = 'text';
    newInput.placeholder = "Textfield no. " + k;
    fieldset.appendChild(newInput);
    fieldset.appendChild(document.createElement('br'));
  }

  wrapper_div.insertBefore(fieldset, this);

}, false);

No. of textfields :
<input id="no_of_fields" type="text" />

<div id="input_set">
  <p>
    <label for="my_input"></label>
  </p>
  <button id="btn" href="#">Add</button>
</div>

score 0 · Answer 3 · edited Aug 13 '15 at 12:46

It is a simple task which is made simpler with jQuery. You need to first get the value from the input field for which you can use .val() or .value. Once you get the value, check if it is an integer. Now, simply use .append() function to dynamically add the elements.

HTML

<form id="myForm">
    Number of Messages: <input id="msgs" type="text"> </input>
    <div id="addmsg">
    </div>
</form>

JAVASCRIPT

$("#msgs").on('change', function()

{
    var num = this.value;
    if(Math.floor(num) == num && $.isNumeric(num))
    {
         $("#addmsg").text('');
        for(var i = 0; i < num; i++)
        {
            $("#addmsg").append("<input type='text'/><br/>");
        }
    }
});

Fiddle

Note, everytime the value in the input changes, I am first clearing the div by:

$("#addmsg").text('');

And then I loop and keep adding the input field. I hope this helps!

OP **would really appreciate if I could find a solution to my query using JavaScript.** — Praveen Puglia, Aug 13 '15 at 12:48
Missed that... But well, JQuery is cleaner. JS answer can be found here: http://stackoverflow.com/questions/14853779/adding-input-elements-dynamically-to-form — GobSmack, Aug 13 '15 at 13:06

Dynamically adding HTML form fields based on a number specified by the user

3 Answers3