1

Galera eu tenho esse JS para poder duplicar um cadastro:

function duplicarCampos(){

    var clone = document.getElementById('div_dados_historico').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]);
}

e esse HTML:

<div id="div_dados_historico" style="display: none;">

                <h3>HISTÓRICO PROFISSIONAL</h3>
                <label>Empresa</label>
                <input type="text"  name="empresa1[]" placeholder="Empresa" />
                <label>Cargo</label>
                <input type="text"  name="cargo1[]" placeholder="Cargo" />
                <label>Periodo</label>
                <input type="text"  name="periodo1[]" placeholder="Periodo" />
                <label>Atividades</label>
                <textarea rows="4" cols="50"  name="atividades1[]" placeholder="Atividades" > </textarea>
                <center><div>           
                <img  src="<?php echo $URL ?>site/view/images/add.jpg" style="cursor: pointer;" onclick="duplicarCampos();">
                <img  src="<?php echo $URL ?>site/view/images/cross.jpg" style="cursor: pointer;" onclick="removerCampos(this);"> 
                </div> </center>

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

Porem eu queria que conforme eu fosse abrir um "MAIS", ele aparece empresa2, empresa3, empresa4.....n. Como eu poderia fazer isso no JS ?

https://jsfiddle.net/pycassu9/

10
  • Onde está o HTML de #div_dados_historico? onde queres inserir esse _2, _3 etc?
    – Sergio
    9/11/2016 às 15:12
  • O #div_dados_historico é onde o JS qual o formulario é para duplicar quando aperta no botão "add.jpg", ai eu quero que quando o cara clicar em "add.jpg", ele apareça empresa2 , cargo2, periodo2.... 9/11/2016 às 15:20
  • Eu percebo que essa div é para clonar, a minha duvida é onde está esse HTML...
    – Sergio
    9/11/2016 às 15:42
  • o html está dentro da div, assim : <div id="div_dados_historico" style="display: none;"> 9/11/2016 às 15:45
  • É segredo colocar o HTML todo? queres "boas respostas" ou "meias respostas"? Quanto mais informação deres mais podemos ajudar...
    – Sergio
    9/11/2016 às 15:46

1 Resposta 1

1

Para fazer isso, basta criar um contador no evento:

Jquery:

$(function() {
   $('#remove').on('click', function() {
     var bt = $(this);
     ($('.history').length == 2) ? bt.hide() : bt.show();
    $('.history:last-child').remove();
  });
     $('#add').on('click', function() {

       var bt = $('#remove');
       var i = $('.history').length + 1;
       (i == 1) ? bt.hide() : bt.show();
       var content = [
                '<div class="history" id="item_',i,'">\
                  <h3>HISTÓRICO PROFISSIONAL</h3>\
                    <label>Empresa ',i,'</label>\
                    <input type="text"  name="empresa[]"\ placeholder="Empresa" />\
                    <label>Cargo</label>\
                    <input type="text"  name="cargo[]"\ placeholder="Cargo" />\
                    <label>Periodo</label>\
                    <input type="text"  name="periodo[]"\ placeholder="Periodo" />\
                    <label>Atividades</label>\
                    <textarea rows="4" cols="50"\ name="atividades[]" ',
                    'placeholder="Atividades" ></textarea>\
                 <div>'
            ].join('');
            $('#div_dados_historico').append(content);

     });
 //o trigger é para adicionar o primeiro item do formulário
 $('#add').trigger('click');
});

HTML:

<div id="div_dados_historico">
</div>
 <center>
 <div>
<button id="add">+ MAIS</button>
<button id="remove">- MENOS</button>
</div></center>

Exemplo que fiz utilizando jquery: JSFIDDLE

Usando o javascript puro:

function duplicarCampos(){
    var clone = document.getElementById('div_dados_historico').cloneNode(true);
    var destino = document.getElementById('destino');
  var t = document.querySelectorAll(".el_cloned").length;
  clone.querySelector("label").innerHTML = 'Empresa '+ parseInt(t);
    destino.appendChild (clone);
    var camposClonados = clone.getElementsByTagName('input');
    for(i=0; i<camposClonados.length;i++){
        camposClonados[i].value = '';
    }
  t++;
}
function removerCampos(id){
  var t = document.querySelectorAll(".el_cloned").length;
    var node1 = document.getElementById('destino');
    node1.removeChild(node1.lastChild);
   t--;
 node1.lastChild.querySelector("label").innerHTML = 'Empresa '+ parseInt(t-1);
}

Sua HTML ficaria assim:

<div id="div_dados_historico">
    <div class="el_cloned">
      <h3>HISTÓRICO PROFISSIONAL</h3>
         <label>Empresa</label>
         <input type="text"  name="empresa1[]" placeholder="Empresa" />
         <label>Cargo</label>
         <input type="text"  name="cargo1[]" placeholder="Cargo" />
         <label>Periodo</label>
         <input type="text"  name="periodo1[]" placeholder="Periodo" />
          <label>Atividades</label>
          <textarea rows="4" cols="50"  name="atividades1[]" placeholder="Atividades" ></textarea>
         <center><div>           
          <img  src="<?php echo $URL ?>site/view/images/add.jpg" style="cursor: pointer;" onclick="duplicarCampos();">
          <img  src="<?php echo $URL ?>site/view/images/cross.jpg" style="cursor: pointer;" onclick="removerCampos(this);"> 
        </div></center>
     </div>
</div>
<div id="destino"></div>

Exemplo baseado no seu modelo: JSFIDDLE

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .