Contador de quantidade

[clickanapolis 1]

Pessoal boa tarde, tenho um codigo em javascript que inclui novos campos a um formulario duplicando uma div.

Só que o cliente pediu para que eu limite a quantidade de campos como eu faria isso?

 

function duplicarCampos(){
    var clone = document.getElementById('origem').cloneNode(true);
    var destino = document.getElementById('destino');
    destino.appendChild (clone);
    var camposClonados = clone.getElementsByTagName('input');
    for(i=0; i<camposClonados.length;i++){
        camposClonados[i].value = '';
    }
    }
    function removerCampos(id){
        var node1 = document.getElementById('destino');
        node1.removeChild(node1.childNodes[0]);
    }

 

[Omar~ 87]

Bem, se fosse eu, modificaria a estrutura das funções, para elas se comunicarem entre sí. Usaria orientação ao objeto, assim sendo é mais prático só executar tal ação se um objeto existe ou se um método autoriza, e o mais é que não precisa ficar consultando o documento toda vez que precisar obter algum valor (isso você ganha muito em performace) etc...

Mas, enfim... Isso: camposClonados.length são a quantidade de inputs existentes (use o length toda vez que precisar consultar esse tipo de coisa).

 

Obs.:

- Sua função está criando inputs com o mesmo ID no documento.

- A função removerCampos está dentro da estrutura da função de adicionar.

- Só não mostrei um exemplo porque não sei se você quer clonar todos inputs de um local para outro ou clonar de 1 em 1.

 

[clickanapolis 1]

Omar eu clono tudo que esta dentro de uma div.

 

Só que o cliente pediu que o limite para clonar fosse 3.

[Omar~ 87]

Bem nesse termo fica simples fazer a coisa veja preparei um exemplo.

Não sei se é bem isso mas está aqui.

 

Spoiler

<div id="origem">
    <input type="text" name="input_1[]"/>
    <input type="text" name="input_2[]"/>
    <input type="text" name="input_3[]"/>
    <input type="text" name="input_4[]"/>
    <input type="text" name="input_5[]"/>
</div>
<button onclick="clonar()">Clonar</button>
<button onclick="remover()">Remover</button>

<div id="destino"></div>

<script>
    var quantidade = 3; // Somente os 3 primeiros
    var origem = document.getElementById('origem'); // Elemento onde estão os inputs
    var destino = document.getElementById('destino'); // Onde vão ser clonados
    var limite, input, i, clone;

    function clonar() {
        if (limite != quantidade) { // O limite foi alcançado
            input = origem.getElementsByTagName('input'); // pegar o input da origem
            for (i = 0; i < quantidade; i++) {
                clone = document.createElement('input'); // criar novo input
                clone.name = input[i].name; // inserir o name do input de origem no novo
                clone.id = 'input_clonado_id_' + i; // adicionar um ID no input novo
                destino.appendChild(clone); // Colocar o novo input no destino
            }
            limite = quantidade; // definir o limite para a quantidade
        }
    }

    function remover() {
        input = destino.getElementsByTagName('input');
        for (i = input.length - 1; i >= 0; i--) {
            input[i].parentNode.removeChild(input[i]);
        }
        limite = 0;
    }
</script>