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:
A cada clique no botão adicionar, ele duplica a quantidade atual de divs com a classe .prof-exp;
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