爲什麼這些數組不能保存動態添加的文本字段？

Question

我試圖通過單擊一個加號按鈕來添加多個字段。然後，我有四個陣列用於四個特定文本字段：company,from,to和year。如果我點擊按鈕，我會得到四個字段。我想輸入值並將值保存在四個數組中。當我再次點擊按鈕時，應該發生同樣的事情。

該數組僅保存每個字段的第一個值，另一個值爲空。我怎樣才能保存數組中的所有值？

var company = []; 
 
var from = []; 
 
var to = []; 
 
var year = []; 
 

 
var scntDiv = $('#addmorefieldexp'); 
 
var i = $('#addmorefieldexp p').size() + 1; 
 
       
 
/* $('#pexp').live('click', function() */ 
 
$("#pexp").click(function(){ 
 
    $(' <br><br>' 
 
     +'<label for="inputPassword3" class="col-sm-2 control-label">Company Name</label>' 
 
     +'<div class="col-sm-2">' 
 
     +'<input type="text" class="form-control" name="field_company[]" value="" id="company">' 
 
     +'</div>' 
 

 
     +'<label for="inputPassword3" class="col-sm-1 control-label">From</label>' 
 
     +'<div class="col-sm-2">' 
 
     +'<input type="text" class="form-control" name="field_from[]" value="" id="from">' 
 
     +'</div>' 
 
     
 
     +'<label for="inputPassword3" class="col-sm-1 control-label">To</label>' 
 
     +'<div class="col-sm-2">' 
 
     +'<input type="text" class="form-control" name="field_to[]"value="" id="to">' 
 
     +'</div>' 
 

 
     +'<label for="inputPassword3" class="col-sm-1 control-label">Year</label>' 
 
     +'<div class="col-sm-1">' 
 
     +'<input type="text" class="form-control" name="field_year[]"value="" id="year">' 
 
     +'</div>').appendTo(scntDiv); 
 
\t 
 
    var add_company = $("input[name$='field_company[]']").val(); 
 
    company.push(add_company); 
 
    
 
    var add_from = $("input[name$='field_from[]']").val(); 
 
    from.push(add_from); 
 
    
 
    var add_to = $("input[name$='field_to[]']").val(); 
 
    to.push(add_to); 
 
    
 
    var add_year = $("input[name$='field_year[]']").val(); 
 
    year.push(add_year); 
 
    
 
    console.log(company, from, to, year); 
 

 
    return false;      
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="form-group" id="experience"> 
 
    <label class="col-sm-2 control-label">Employment Experience</label> 
 
    <div class="col-sm-4" id="checkbox" value=""> 
 
    <input type="radio" name="exp" class="expp" value="Yes">Yes 
 
    <input type="radio" name="exp" class="expp" value="No">No 
 
    <button class="btn btn-lg btn-sm btn-primary btn-circle" id="pexp"><i class="fa fa-plus"></i> 
 
    </button> 
 
    </div> 
 
</div> 
 
<div class="form-group text-center" id="addmorefieldexp"> 
 
    <p> 
 
    </p> 
 
</div>

Answer 1

我做！ ！我必須添加這個來保存數組的值。

var inps = document.getElementsByName('field_company[]'); 
     for (var i = 0; i <inps.length; i++) { 
     var inp=inps[i]; 
      company.push(inp.value); 

Answer 2

你只需要編寫一個for循環遍歷所有的輸入字段進行迭代，像這樣：

var companyField = $("input[name$='field_company']"); 
for (var i;i<companyField.length;i++) { 
    var companyValue = companyField[i].val(); 
    company.push(companyValue); 
} 

var fromField = $("input[name$='field_from']"); 
for (var i;i<fromField.length;i++) { 
    var fieldValue = fromField[i].val(); 
    from.push(fieldValue); 
} 

var toField = $("input[name$='field_to']"); 
for (var i;i<toField.length;i++) { 
    var toValue = toField[i].val(); 
    to.push(toValue); 
} 

var yearField = $("input[name$='field_year']"); 
for (var i;i<yearField.length;i++) { 
    var yearValue = yearField[i].val(); 
    year.push(yearValue); 
}