使用Javascript在單個div中添加多個輸入字段

Question

我正在編寫一個用於多數據設置的JavaScript程序。但我陷入代碼中，根據輸入字段的輸入數量放置多個輸入文件。

function createTextFields(nom) { 
    alert(nom); 
    var count = nom; 
    for (var l = 0; l < count.length; l++) { 
    document.getElementById('formSet').innerHTML = '<input type="text" class="form-control" name="textField_' + l + '" id="textField_' + l + '" required>'; 
    } 
} 

Answer 1

您可以使用+=新input追加到form。

createTextFields(10); 
 

 
function createTextFields(nom) { 
 
    var count = nom; 
 
    for (var l = 0; l < count; l++) { 
 
    document.getElementById('formSet').innerHTML += '<input type="text" class="form-control" placeholder="textField_' + l + '" name="textField_' + l + '" id="textField_' + l + '" required><br/>'; 
 
    } 
 
}

<form id="formSet"> </form>

注：代替count.length在for條件我只放count因爲你說 「輸入的號碼」 和Number沒有length財產。

Answer 2

我建議你不應該使用innerHTML。而是創建新的元素併爲其添加屬性。正如我剛纔如下圖所示：

function createTextFields(nom) 
     { 
      alert(nom); 
      var count = nom; 
      for(var l = 0; l<count.length;l++) 
      { 
//    document.getElementById('formSet').innerHTML = '<input type="text" class="form-control" name="textField_'+l+'" id="textField_'+l+'" required>'; 
       var input = document.createElement("INPUT");  
       input.setAttribute("type", "text"); 
       input.setAttribute("class", "form-control"); 
       input.setAttribute("name", "textField_"+l); 
       input.setAttribute("id", "textField_"+l); 
       input.setAttribute("required", true); 
       document.getElementById('formSet').appendChild(input); 
      } 

     } 

Answer 3

<script> 

// call funciton createTextFields 
createTextFields(10); 

function createTextFields(nom) 
{ 
    // nom will be a number of elements to be added 
    var count = nom; 

    var k = new Array(); 

    for(var l = 0; l <count; l++) 
    { 
     // push into array 
     k.push('<input type="text" class="form-control" name="textField_'+l+'" id="textField_'+l+'" required>'); 

    } 
    // insert those childs to the formset and by joining the array 
    // of textfield 
    document.getElementById('formSet').innerHTML = k.join(''); 

} 

</script> 

隨時根據您的需要