从动态/种植形式获取信息

有一个表单来创建合同，其中该合同可以有一个或多个用户关联。从动态/种植形式获取信息

输入用户信息的区域，以一个用户的只有一个字段开始，如果需要添加一个按钮以添加更多字段。

<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时创建一个空的用户对象？与用户相关的信息将被添加如何？或者代码在哪里？在保存合约按钮上？ –

从动态/种植形式获取信息

回答

相关问题