如何动态创建<input type =“text”/>

我想在我的web表单中动态创建一个输入类型文本。更具体地说，我有一个文本字段，用户输入所需文本字段的数量;我想要以相同的形式动态生成文本字段。如何动态创建<input type =“text”/>

我该怎么做？

2011-04-13 Mohammad Usman

116

使用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

来源

2011-04-13 22:24:23 Zach

对不起，但我不能在我的表单上显示它？当点击添加按钮时，我创建了一个函数。但我无法弄清楚如何从文本字段获取vlaue，用户输入要创建的文本字段的数量。。？如果我还想为这些动态创建的文本字段分配一个css类，该怎么办？。？ – 2011-04-13 22:58:04

我在示例中添加了一些代码，以显示将其附加到DOM并将CSS类添加到动态创建的元素。 – Zach 2011-04-13 23:25:44

也许方法document.createElement();是你在找什么。

来源

2011-04-13 22:24:59 Eliasdx

你可以根据输入的文本字段的数量在循环中做这样的事情。

$('<input/>').attr({type:'text',name:'text'+i}).appendTo('#myform');

但为了获得更好的性能，我先创建所有的html，然后只将它注入到DOM中一次。

var count = 20; 
var html = []; 
while(count--) { 
    html.push("<input type='text' name='name", count, "'>"); 
} 
$('#myform').append(html.join(''));

编辑这个例子用了jQuery追加HTML，但是你可以很容易地修改它使用innerHTML为好。

来源

2011-04-13 22:30:11 daniellmb

可能很好，这取决于jQuery，因为问题没有指定jQuery。 – Jeff 2011-04-13 22:38:41

您可以使用用于创建文本框

来源

2011-04-14 01:22:53 Sean

我觉得下面的链接将帮助您createElement()方法。如果您想要动态生成字段并且希望同时删除它们，则可以从此处获得帮助。我有同样的问题，所以我得到的答案

$(function() { 
     var scntDiv = $('#p_scents'); 
     var i = $('#p_scents p').size() + 1; 

     $('#addScnt').live('click', function() { 
       $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv); 
       i++; 
       return false; 
     }); 

     $('#remScnt').live('click', function() { 
       if(i > 2 ) { 
         $(this).parents('p').remove(); 
         i--; 
       } 
       return false; 
     }); 
});

http://jsfiddle.net/jaredwilli/tZPg4/4/

来源

2013-09-27 06:42:40 user1477132

该代码的删除部分是相当不完善的。如果添加2个输入并删除中间的输入，则最终会输入2个具有相同ID的输入。最好用'i - '去掉这行;如果你把它放入由PHP处理的表单中，你将不得不分别处理原始的和额外的输入字段。 – jaaq 2017-02-08 17:17:00

看到这个答案的非JQuery的解决方案。刚刚帮我出去了！

Adding input elements dynamically to form

来源

2017-02-08 18:29:34 jaaq

非常好。我不明白为什么人们总是用jquery来举例。谢谢。 – kdobrev 2017-04-07 16:23:23

使用JavaScript，你需要的是document.createElement和setAttribute。

var input = document.createElement("input"); 
input.setAttribute('type', 'text');

然后，您可以使用appendChild将创建的元素追加到所需的父元素。

var parent = document.getElementById("parentDiv"); 
parent.appendChild(input);

来源

2017-04-16 17:01:40

如何动态创建<input type =“text”/>

回答

相关问题