Question

有一个表单来创建合同，其中该合同可以有一个或多个用户关联。

输入用户信息的区域，仅以一个用户的一个字段开头，一个按钮可根据需要添加更多字段。

<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

<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>

我的问题是，我如何获得创建的用户数量，并使用Javascript将它们插入到列表中。该列表将是Object（Contract）的一个属性。

我现在所拥有的：

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 });
}

任何帮助表示赞赏

编辑：感谢Shilly

找到了解决方案

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
            });
        });

Answer 1

您可以拥有一个空数组，并且每次点击addUser时都会将一个新对象放入数组中。该对象可以具有与添加的用户相关的信息。

Answer 2

这样的东西？但是，正如Super Hirnet所说，将它添加到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
    });
});

从动态/成长形式获取信息

2 个答案: