代码之家 › 专栏 › 技术社区 › kowsikbabu

如何使用js在html中添加n个输入字段

html javascript

kowsikbabu · 技术社区 · 8 年前

我必须从用户那里获取“n”个名称的总数,然后创建n个字段来获取所有名称。我现在写的是:

HTML代码:

<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代码:

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"));
    }
}

但当我在浏览器上运行它时,在点击“输入名称”之后,我在浏览器中看不到任何更改! 我怎么了?

2 回复 | 直到 8 年前

vikscool 8 年前

你所做的是试图获取 noofticktes 它被定义为 name 在html中,但是在代码中,您使用 document.getElementById('noofticktes').value 它正在抛出一个 undefined 错误,因为没有 id 定义为 诺夫铁克斯 . 所以,只需从以下位置更改代码:

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

对此:

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

你将能够使你的代码工作。

如果您试图清除/删除元素的所有内容,代码中的一个小更新就是 container 只使用 container.innerHTML='' 而不是循环和移除每个元素。

这是更新的代码片段。

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 8 年前

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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前