Sequential number in a dynamic form

Asked

Viewed 267 times

1

Guys I have this JS to be able to duplicate a record:

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

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

However I wanted that as I was opening a "MORE", it appears company2, company3, company4.... .n. How could I do that in JS ?

https://jsfiddle.net/pycassu9/

javascript html

  • Where is the HTML of #div_dados_historico? where do you want to insert this _2, _3 etc.?

  • The #div_dados_historico is where the JS form is to duplicate when pressing the "add.jpg" button, then I want that when the guy clicks "add.jpg", it appears empresa2 , cargo2, periodo2....

  • I realize that div is for cloning, my doubt is where is this HTML...

  • html is inside the div, so : <div id="div_dados_historico" style="display: None;">

  • Is it secret to put all the HTML? do you want "good answers" or "half answers"? The more information you give the more we can help...

  • so all html is this msm kkkkk, ta so oh :

  • I put here https://jsfiddle.net/pycassu9/ so you can understand better

  • How will you receive all this data if the possibilities will be N, besides, why send them as array if you are incrementing the names?

  • I thought the Names would be to record in the rs bank, now I’m in doubt rs, so I don’t know much, I try to implement in the code and keep hitting

  • I think it’s the same of that question.

Show 5 more comments

1 answer

1


To do this, simply create a counter in the event:

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>

Example I did using jquery: JSFIDDLE

Using the pure javascript:

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

Your HTML would look like this:

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

Example based on your model: JSFIDDLE

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.