Javascript新增動態輸入字段

Question

我一點都不擅長Javascript，所以我來這裏尋求幫助。

我所擁有的是一個表單，其中有一個鏈接「添加額外的URL」字段。我想要它，所以當用戶點擊它時，它會在默認url字段下面填充一個附加字段，並帶有一個唯一的輸入名稱，比如url_input1，如果他們再次單擊它來添加另一個url輸入，則該輸入的名稱將會被url_input2等

我該怎麼用Javascript做到這一點？

Answer 1

看的createElement http://www.adp-gmbh.ch/web/js/elements/createelement.html

​​

爲ID，你可以簡單地追加一個計數器到任何ID名稱您希望提供（見上文）

Answer 2

或者，我會說你可以只用JavaScript從頭開始編寫HTML。我一直有問題，使用了document.createElement，這樣的替代方法是：

function get_parent_add_input() { 
var parent_element = this.parentNode;// here, we get the parent node 
var current_innerHTML = String(parent_element.innerHTML); 
var new_input_html = '<input type="text" name="inputs[]" />'; 
parent_element.innerHTML = current_innerHTML + new_input_html; 
} 

此功能將得到討論的文字輸入的父元素，從而允許您添加到其innerHTML的。

至於每次給id加1，你都沒有必要。如果您通過PHP捕獲表單輸入，則只需使用$_POST['inputs']，這將返回所有輸入值的數組，名稱爲輸入。

Answer 3

這對於像jQuery這樣的JS庫來說是一個完美的工作。對於這個jQuery示例實現，請參閱this。

，如果你想手工製作這種使用純JavaScript和DOM操作，你有2種選擇：

1. 你可以做的createElement和結合起來，與任何使用appendChild（見this或this）或的insertBefore（見this或this）取決於插入點的位置。 （如Sonic Soul建議）
2. 使用innerHTML並通過將控件的HTML傳遞給它來添加控件，這非常類似於我的尖峯中的jQuery方法。 （由約書亞描述）

選項1比選項慢2.

就個人而言，我會使用jQuery，因爲它會抽象一些的DOM實現的，可能會導致一些跨瀏覽器的問題，只是因爲這是更好和更強大的做這樣的東西。

Answer 4

這個例子alow您添加和刪除動態輸入

嘗試這樣的事：

$(document).ready(function() { 

    var MaxInputs  = 8; //maximum input boxes allowed 
    var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID 
    var AddButton  = $("#AddMoreFileBox"); //Add button ID 

    var x = InputsWrapper.length; //initlal text box count 
    var FieldCount=1; //to keep track of text box added 

    $(AddButton).click(function (e) //on add input button click 
{ 
    if(x <= MaxInputs) //max input box allowed 
    { 
      FieldCount++; //text box added increment 
      //add input box 
     $(InputsWrapper).append('<div><input type="text" name="mytext[]"        
     id="field_'+ FieldCount +'" value="Text '+ FieldCount +'"/><a href="#" class="removeclass">&times;</a></div>'); 
     x++; //text box increment 
    } 
    return false; 
    }); 

$("body").on("click",".removeclass", function(e){ //user click on remove text 
    if(x > 1) { 
      $(this).parent('div').remove(); //remove text box 
       x--; //decrement textbox 
      } 
     return false; 
}) 

});