Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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 eu clono tudo que esta dentro de uma div.
Só que o cliente pediu que o limite para clonar fosse 3.
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>
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.