js动态生成文本输入框,如何定义这些文本输入框的id,并且提交表单获取这些值
需求是这样：比如我在文本框里填个数字6，然后触发onchange事件，会动态生成6个文本框，然后我分别在这6个文本框中输入不同的内容，然后点击提交，后台程序可以获取到所有...
需求是这样：
比如我在文本框里填个数字6，然后触发onchange事件，会动态生成6个文本框，然后我分别在这6个文本框中输入不同的内容，然后点击提交，后台程序可以获取到所有输入的内容，请问JS如何写。
<input type="text" id="js_add_num" name="js_add_num" size="4" onchange="addtextarea(this.value)" />
function addtextarea(x){
for (var i=0;i<x;i++)
{
var textarea = document.createElement("input");//这里有个疑问，怎么给这个input赋予id值
//这里往下的代码，怎么写，才能实现后台程序获取到所有输入信息
}
} 展开
比如我在文本框里填个数字6，然后触发onchange事件，会动态生成6个文本框，然后我分别在这6个文本框中输入不同的内容，然后点击提交，后台程序可以获取到所有输入的内容，请问JS如何写。
<input type="text" id="js_add_num" name="js_add_num" size="4" onchange="addtextarea(this.value)" />
function addtextarea(x){
for (var i=0;i<x;i++)
{
var textarea = document.createElement("input");//这里有个疑问，怎么给这个input赋予id值
//这里往下的代码，怎么写，才能实现后台程序获取到所有输入信息
}
} 展开
3个回答
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script>
function addtextarea(x){
if(x==""){
count=0;
}else{
count=x;
}
var inputs = document.getElementById("inputs");
while(inputs.hasChildNodes()) //每次动态添加应该更新内容，当div下还存在子节点时 循环继续
{
inputs.removeChild(inputs.firstChild);
}
for (var i=0;i<count;i++){
var username = document.createElement("input");
username.type="text";
username.name="name_"+i;
username.id=i;//给这个input赋予id值
username.value="动态创建"+i;
inputs.appendChild(username);
inputs.appendChild(document.createElement("br"));
//提交信息直接用表单提交，本来内容就是循环在Form里的，你应该懂吧
}
}
</script>
</head>
<body>
动态添加数（输数字）：<input type="text" id="js_add_num" name="js_add_num" size="4" onkeyup="addtextarea(this.value)" />
<form id="inputs" action="像服务端发的请求" method="post">
</form>
</body>
</html>
老哥，直接复制过去运行看看是不是你要的效果。嘿嘿
追问
你好，代码运行效果是很好的，但还有一点之前没有想到，就是如何在每个创建的文本框前后，添加自己的html内容，比如：“请在这里输入：”+文本输入框+“格式要求：必须为大写”。我看你是通过inputs.appendChild(document.createElement("br"));来实现美观的换行，但不知道如何在文本框的前后加我自定义想输入的文字，感谢回答。
追答
<style>
#format{
color: red;
font-size: 12px;
}
</style>
<script>
function addtextarea(x){
if(x==""){
count=0;
}else{
count=x;
}
var inputs = document.getElementById("inputs");
while(inputs.hasChildNodes()) //每次动态添加应该更新内容，当div下还存在子节点时 循环继续
{
inputs.removeChild(inputs.firstChild);
}
for (var i=0;i<count;i++){
var username = document.createElement("input"); //文本输入框节点
var info = document.createElement("span");
var format = document.createElement("span");
info.innerHTML="在这里输入：";//提示
format.innerHTML=" *要求格式";//要求格式
format.id="format";
username.type="text";
username.name="name_"+i;
username.id=i;//给这个input赋予id值
username.value="动态创建"+i;
inputs.appendChild(info);
inputs.appendChild(username);
inputs.appendChild(format);
inputs.appendChild(document.createElement("br"));
//提交信息直接用表单提交，本来内容就是循环在Form里的，你应该懂吧
}
}
</script>
道理一样，再创建两个节点，添加相应你要的内容。但是提示信息每个不一样，你就要在循环中去判断哪个是什么内容，有点麻烦。把之前的替换成现在的内容看看
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
function addtextarea(obj)
{
var reg = /^\s*[1-9]\d*\s*$/;
if (!reg.test(obj.value)) {
obj.value = '';
obj.focus();
return false;
}
for (var i = 0; i < parseInt(obj.value); i++)
{
var _input = document.createElement("input");
_input.type = "text";
_input.id = "_input" + i;
document.body.appendChild(_input);
}
}
</script>
</head>
<body>
<input type="text" id="js_add_num" name="js_add_num" size="4" onchange="addtextarea(this)" />
<input type="button" value="submit" />
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<input type="text" id="js_add_num" name="js_add_num" size="4" onchange="addtextarea(this.value)" />
function addtextarea(x){
for (var i=0;i<x;i++)
{
var textarea = document.createElement("input");//这里有个疑问，怎么给这个input赋予id值
textarea.id = 'xxxxx';
textarea.name = 'xxx';//这里设置name很重要，后台要通过name获取值
//然后要把你新增的input添加到form中，提交也是提交form后台才会获取到
}
}
function addtextarea(x){
for (var i=0;i<x;i++)
{
var textarea = document.createElement("input");//这里有个疑问，怎么给这个input赋予id值
textarea.id = 'xxxxx';
textarea.name = 'xxx';//这里设置name很重要，后台要通过name获取值
//然后要把你新增的input添加到form中，提交也是提交form后台才会获取到
}
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
