從動態/種植形式獲取信息

有一個表單來創建合同，其中該合同可以有一個或多個用戶關聯。從動態/種植形式獲取信息

輸入用戶信息的區域，以一個用戶的只有一個字段開始，如果需要添加一個按鈕以添加更多字段。

<div id="utilizadores" class="row"> 
      <div id="utilizador1" class="container-fluid"> 
       <div class="row"> 
        <div class="col-lg-5"> 
         <input type="text" class="form-control" id="nomeUtilizador1" placeholder="Nome Utilizador"> 
        </div> 

        <div class="col-lg-6"> 
         <input type="text" class="form-control" id="funcaoUtilizador1" placeholder="Função"> 
        </div> 
       </div>  
      </div> 
     </div>

這是出發DIV

點擊添加用戶按鈕將其下的「utilizador1」

<div id="utilizadores" class="row"> 
<div id="utilizador1" class="container-fluid"> 
    <div class="row"> 
     <div class="col-lg-5"> 
      <input type="text" class="form-control" id="nomeUtilizador1" placeholder="Nome Utilizador"> 
     </div>      
     <div class="col-lg-6"> 
      <input type="text" class="form-control" id="funcaoUtilizador1" placeholder="Função"> 
     </div> 
    </div>  
</div> 
<div id="utilizador2" class="container-fluid"> 
    <div class="row"> 
     <div class="col-lg-5"> 
      <input type="text" class="form-control" id="nomeUtilizador2" placeholder="Nome Utilizador"> 
     </div> 
     <div class="col-lg-6"> 
      <input type="text" class="form-control" id="funcaoUtilizador2" placeholder="Função"> 
     </div> 
    </div>  
</div>

我的問題是，我怎麼能得到增加了一個新的div創建的用戶數量，並使用Javascript將其插入到列表中。該列表將是對象（合同）的屬性。

我有什麼直到現在：

function test_saveItem() {   
var contract = new Object(); 
contract.Dono = <% =uID %>; 

contract.BoostMes = $("#boostMes").val(); 
contract.BoostAno = $("#boostAno").val(); 

var ListaUtilizadores = []; 

var divs = document.getElementsByName("utilizador"); 
for (var i = 0; i < divs.length; i++){ 
    var user = new Object(); 
    user.Nome = $('#nomeUtilizador' + i).val(); 
    ListaUtilizadores.push(user); 
} 

var test = JSON.stringify({ "contract": contract }); 
}

任何幫助表示讚賞

編輯：到了一個解決方案感謝扭扭

List = []; 
     Array.prototype.slice.call(document.querySelectorAll('.user')).forEach(function (node, index) { 
      List.push({    
       "name" : document.getElementById('nameUser' + (index + 1)).value, 
       "job" : document.getElementById('jobUser' + (index + 1)).value 
      }); 
     });

來源

2015-06-22 Ruben S

是這樣的嗎？但是如超級赫內特所說，將它添加到addUser函數中將會更加高效。

var divs = document.querySelector('#utilizadores').childNodes, 
    users = []; 
Array.slice.call(divs).forEach(function (node, index) { 
    users.push({ 
     "name" : divs[index].getElementById('nomeUtilizador' + (index + 1)).value 
    }); 
});

來源

2015-06-22 11:41:48 Shilly

嘗試類似於您的示例的解決方案後，出現錯誤，指出「node.querySelector不是函數」。 divs數組正確填充，到達代碼中斷的節點。但是，感謝您的進步，讓我開始尋找解決方案。 –

編輯。我希望這個表格現在不會破壞節點。 – Shilly

沒有工作主要cuz getElementById只適用於文檔。但得到了一個解決方案，主要編輯。謝謝 –

你可以有一個空數組和每次點擊addUser將一個新對象放入數組中。該對象可以具有與添加的用戶有關的信息。

來源

2015-06-22 11:35:09

在我看來這是一個很好的解決方案，一個問題，我只是在點擊addUser時創建一個空的用戶對象？與用戶相關的信息將被添加如何？或者代碼在哪裏？在保存合約按鈕上？ –

從動態/種植形式獲取信息

回答

相關問題