0

Oi! Criei um form em HTML para um gerador de curriculos e no campo "experiência profissional" tem apenas inputs para registro de uma experiência.

HTML:

 <fieldset id="professional-info">
            <legend><h2>Experiência profissional</h2></legend>
            <div class="prof-exp">

                <label for="cargo"> Cargo: <input type="text" name="cargo" id="cargo"></label><br>
                <label for="empresa"> Empresa: <input type="text" name="empresa" id="empresa"></label><br>
                <label for="data-inicio"> Início: <input type="date" name="data-inicio" id="data-inicio"></label>
                <label for="data-fim"> Término: <input type="date" name="data-fim" id="data-fim"></label>
                <label for="atual"><input type="checkbox" name="atual" id="atual">Ainda trabalho aqui</label><br>
                <label for="descricao"> Descrição: <textarea name="descricao" id="descricao" cols="40" rows="1"></textarea></label>
            </div>
            <button type="button" form="main" id="add-exp">Adicionar outra experiência</button> 
        </fieldset>

JAVASCRIPT:

function addRemoveExp() {
$(".prof-exp").clone().appendTo("#professional-info");}document.getElementById("add-exp").onclick = function(){addRemoveExp()};

Como podem ver, deixei um botão de adicionar outra experiência, para que o usuário possa cadastrar novas experiências se assim desejar. Até agora estou tentando usar os metodos clone() e appendTo() do jQuery, mas esta """solução""" não está funcionando porque:

  1. A cada clique no botão adicionar, ele duplica a quantidade atual de divs com a classe .prof-exp;

  2. Uma vez que ele tenha preenchido a 1a experiência e clicar no botão "adicionar outra experiência", todos os dados serão clonados para as experiências abaixo.

Ou seja, não serve. O que eu quero é simplesmente REPLICAR os campos em branco para que o usuário os preencha com suas outras experiencias. Como faço isso?

Como resolvo isso? Não sei mais o que fazer, quero muito resolver esse desafio! Muito obrigado, pessoal, por qualquer tentativa de ajuda.

Sou novo em desenvolvimento e ainda não sei muita coisa, então se eu estiver sendo muito leigo, desculpe-me

1 Resposta 1

0

Por que isso acontece? Quando você busca pela classe de um elemento, você está retornando todos os elementos que tem aquela classe, inclusive os que você acabou de colar.

Como resolver? Eu sugiro que você faça as coisas um pouquinho diferentes. Não use a tag principal para ser clonada, mas uma outra criada exclusivamente com esta finalidade.

Exemplo: Crie uma section ou div com o id "templates" ou utilize a tag <template> que já é suportada pela maioria dos browsers modernos.

Crie uma section com o id templates e que tenha display none. Dentro dela você coloca todos os elementos que servirão de modelo para serem clonados. Como ela nunca será editada você não precisará limpar os campos antes de clonar. Além disso ela pode ter as classes que você quer sem causar conflitos porque serão identificadas pelo id da tag pai.

Algo mais ou menos assim:

function addRemoveExp() {
  $("#templates .prof-exp").clone().appendTo("#professional-info");}document.getElementById("add-exp").onclick = function(){addRemoveExp()};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset id="professional-info">
  <legend><h2>Experiência profissional</h2></legend>
  <div class="prof-exp">

    <label for="cargo"> Cargo: <input type="text" name="cargo" id="cargo"></label><br>
    <label for="empresa"> Empresa: <input type="text" name="empresa" id="empresa"></label><br>
    <label for="data-inicio"> Início: <input type="date" name="data-inicio" id="data-inicio"></label>
    <label for="data-fim"> Término: <input type="date" name="data-fim" id="data-fim"></label>
    <label for="atual"><input type="checkbox" name="atual" id="atual">Ainda trabalho aqui</label><br>
    <label for="descricao"> Descrição: <textarea name="descricao" id="descricao" cols="40" rows="1"></textarea></label>
  </div>
  <button type="button" form="main" id="add-exp">Adicionar outra experiência</button> 
</fieldset>
<section id="templates" style="display: none">
  <div class="prof-exp">
    <label for="cargo"> Cargo: <input type="text" name="cargo" id="cargo"></label><br>
    <label for="empresa"> Empresa: <input type="text" name="empresa" id="empresa"></label><br>
    <label for="data-inicio"> Início: <input type="date" name="data-inicio" id="data-inicio"></label>
    <label for="data-fim"> Término: <input type="date" name="data-fim" id="data-fim"></label>
    <label for="atual"><input type="checkbox" name="atual" id="atual">Ainda trabalho aqui</label><br>
    <label for="descricao"> Descrição: <textarea name="descricao" id="descricao" cols="40" rows="1"></textarea></label>
  </div>
</section>

Seu código ficaria mais elegante e mais fáci de manter se você já inserisse o primeiro formulário usando a mesma função dos demais:

function addRemoveExp() {
  $("#templates .prof-exp").clone().appendTo("#professional-info");}document.getElementById("add-exp").onclick = function(){addRemoveExp()};
  addRemoveExp();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset id="professional-info">
  <legend><h2>Experiência profissional</h2></legend>
  <button type="button" form="main" id="add-exp">Adicionar outra experiência</button> 
</fieldset>
<section id="templates" style="display: none">
  <div class="prof-exp">
    <label for="cargo"> Cargo: <input type="text" name="cargo" id="cargo"></label><br>
    <label for="empresa"> Empresa: <input type="text" name="empresa" id="empresa"></label><br>
    <label for="data-inicio"> Início: <input type="date" name="data-inicio" id="data-inicio"></label>
    <label for="data-fim"> Término: <input type="date" name="data-fim" id="data-fim"></label>
    <label for="atual"><input type="checkbox" name="atual" id="atual">Ainda trabalho aqui</label><br>
    <label for="descricao"> Descrição: <textarea name="descricao" id="descricao" cols="40" rows="1"></textarea></label>
  </div>
</section>

0

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 .