如何動態創建<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」/>

回答

相關問題