how to add n number of input fields in html using js

Question

I have to get 'n' - total number of names from the user and then create n number of fields for getting all the names. I've currently written this as:

HTML code:

<form action="/flight_ticket/book" name="myform" method="post">
  .
  .
  .
  Enter the number of tickets to be booked:
  <input name="nooftickets" type="text"><br/><br/>
  <a href="#" id="names" onclick="addFields();">Enter names</a>
  <div id='container'/>
  </div>
  <br/><br/>
</form>
</body>

JS code:

function addFields(){
    var number = parseInt(document.getElementById("nooftickets").value);
    var container = document.getElementById("container");
    while (container.hasChildNodes()) {
      container.removeChild(container.lastChild);
    }
    for (i=0;i<number;i++){
      container.appendChild(document.createTextNode("Name " + (i+1)));
      var input = document.createElement("input");
      input.type = "text";
      input.name = "name" + i;
      //input.required= true;
      container.appendChild(input);
      container.appendChild(document.createElement("br"));
    }
}

But when I run it on browser, after clicking the "Enter names", I don't see any changes in the browser! What have I got wrong?

Just did, no change after clicking the "Enter names" hyperlink — kowsikbabu
– kowsikbabu, Commented Jun 6, 2018 at 9:56
what is the type of number , looks like it is a string and you might need to parse it to an int. number = parseInt(number); — Senal
– Senal, Commented Jun 6, 2018 at 9:56
if you want to remove all the child inside the container then use container.innerHTML='' instead of looping. and you are trying to fetch the name instead of id. so replace the line for document.getElementById("nooftickets").value to this document.getElementsByName("nooftickets")[0].value — vikscool
– vikscool, Commented Jun 6, 2018 at 9:59

vikscool · Accepted Answer · 2018-06-06 10:08:20Z

What you are doing is trying to fetch the value of the noofticktes which is defined as a name in the HTML but in your code, you are using document.getElementById('noofticktes').value which is throwing an undefined error as there is no id defined as noofticktes. So, just change your code on from:

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

To this:

var number = document.getElementsByName("nooftickets")[0].value;

you will be able to make your code work.

One small update in your code would be if you are trying to clear/remove all the contents of the element container just use the container.innerHTML='' instead of looping and removing each element.

Here is the updated Snippet of your code.

function addFields() {
  debugger;
  var number = document.getElementsByName("nooftickets")[0].value;
  var container = document.getElementById("container");
  container.innerHTML = '';
  for (i = 0; i < number; i++) {
    container.appendChild(document.createTextNode("Name " + (i + 1)));
    var input = document.createElement("input");
    input.type = "text";
    input.name = "name" + i;
    //input.required= true;
    container.appendChild(input);
    container.appendChild(document.createElement("br"));
  }
}

<form action="/flight_ticket/book" name="myform" method="post">
  . . . Enter the number of tickets to be booked:
  <input name="nooftickets" type="text"><br/><br/>
  <a href="#" id="names" onclick="addFields();">Enter names</a>
  <div id='container' />
  </div>
  <br/><br/>
</form>

Aman Sharma · Accepted Answer · 2018-06-06 10:22:47Z

0

function addFields() {
		// body...
		var input = '';
		var number = document.getElementById('number').value;
		for(var i=0;i<number;i++)
		{
			input +="<input id='number"+i+"' name='number"+i+"'><br>";
		}
		document.getElementById('container').innerHTML = input;
		
	}

<form action="/flight_ticket/book" name="myform" method="post">
  
  Enter the number of tickets to be booked:
  <input name="nooftickets" id="number" type="text"><br/><br/>
  <a href="#" id="names" onclick="addFields();">Enter names</a>
  <div id='container'/>
  </div>
  <br/><br/>
</form>

answered Jun 6, 2018 at 10:22

Aman Sharma

679 bronze badges

Collectives™ on Stack Overflow

how to add n number of input fields in html using js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related