0

Olá, estou fazendo um formulário para projeto de faculdade e gostaria de saber como criar um bloco de código dinamicamente ao apertar um botão.

Tenho o trecho de código abaixo que faz parte do meu formulário:

<div class="wrap-input bg-white">
    <input class="input" name="empresa" type="text" placeholder="Qual foi a empresa?" />
</div>
<div class="wrap-input bg-white rs2-wrap-input">
    <input class="input" name="cargo" type="text" placeholder="Qual foi seu cargo?" />
</div>
<div class="wrap-input bg-white rs2-wrap-input">
    <label class="label-input">Entrada</label>
    <input class="input" type="month" name="empresa_entrada" placeholder="Mês">
</div>
<div class="wrap-input bg-white rs2-wrap-input">
    <label class="label-input">Saída</label>
    <input class="input" type="month" name="empresa_saida">
</div>
<div class="wrap-input bg-white">
    <textarea class="input" name="principais_atividades" rows="3"
              placeholder="Descreva as principais atividades desempenhadas no cargo..."></textarea>
</div>
<button class="button">Adicionar outra experiência</button>

Ao clicar no botão eu gostaria de "duplicar" esse bloco de inputs para a pessoa adicionar uma nova experiência.

Como fazer isso, qual o nome do que quero fazer em JavaScript?

2 Respostas 2

2

Sugiro adicionares uma div à volta de cada grupo de inputs, assim podes facilmente selecionar um grupo. Depois podes ativar uma função quando o botão for pressionado e nessa função crias um clone/cópia com o mesmo conteúdo (daí o true no .cloneNode(true). Antes de inserir esse grupo precisas de apagar os valores copiados.

Um exemplo seria assim:

function adicionarExperiencia() {
  const formulario = document.querySelector('.formulario-experiencia');
  if (!formulario) return;
  const novoFormulario = formulario.cloneNode(true);
  const campos = novoFormulario.querySelectorAll('input, textarea');
  for (let campo of campos) {
    campo.value = '';
  }
  formulario.parentElement.appendChild(novoFormulario);
}
<div class="formulario-experiencia">
  <div class="wrap-input bg-white">
    <input class="input" name="empresa" type="text" placeholder="Qual foi a empresa?" />
  </div>
  <div class="wrap-input bg-white rs2-wrap-input">
    <input class="input" name="cargo" type="text" placeholder="Qual foi seu cargo?" />
  </div>
  <div class="wrap-input bg-white rs2-wrap-input">
    <label class="label-input">Entrada</label>
    <input class="input" type="month" name="empresa_entrada" placeholder="Mês">
  </div>
  <div class="wrap-input bg-white rs2-wrap-input">
    <label class="label-input">Saída</label>
    <input class="input" type="month" name="empresa_saida">
  </div>
  <div class="wrap-input bg-white">
    <textarea class="input" name="principais_atividades" rows="3" placeholder="Descreva as principais atividades desempenhadas no cargo..."></textarea>
  </div>
</div>
<button class="button" onclick="adicionarExperiencia()">Adicionar outra experiência</button>

1
  • Certo, tentarei fazer isso. Obrigado pela dica. Commented 15/07/2019 às 6:31
0

Bom dia. Eu fiz um código usando JQuery para que você consiga ter controle do número de "Forms" criados, onde há um index com autoincremento e decremento dinâmico ( pois adicionei também um botão de excluir). Faça o teste:

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .formulario-experiencia {
            margin-bottom: 1em;
            line-height: 2;
        }

        .input_edit {
            border: none;
            outline: none;
        }

        .index_div {
            margin-bottom: .5em;
        }
    </style>
    <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script src="script.js"></script>
</head>
<body>

<div id="wrap-form">
    <div class="formulario-experiencia">
        <div class="index_div">
            <b>Formulário n°: </b>
            <input name="index_form[]" value="1" class="input_edit" readonly="true">
        </div>

        <div class="wrap-input bg-white">
            <input class="input" name="empresa" type="text" placeholder="Qual foi a empresa?"/>
        </div>
        <div class="wrap-input bg-white rs2-wrap-input">
            <input class="input" name="cargo" type="text" placeholder="Qual foi seu cargo?"/>
        </div>
        <div class="wrap-input bg-white rs2-wrap-input">
            <label class="label-input">Entrada</label>
            <input class="input" type="month" name="empresa_entrada" placeholder="Mês">
        </div>
        <div class="wrap-input bg-white rs2-wrap-input">
            <label class="label-input">Saída</label>
            <input class="input" type="month" name="empresa_saida">
        </div>
        <div class="wrap-input bg-white">
        <textarea class="input" name="principais_atividades" rows="3"
                  placeholder="Descreva as principais atividades desempenhadas no cargo..."></textarea>
        </div>
        <div>
            <button class="excluir_form">X</button>
        </div>
    </div>

</div>

<br>
<div>
    <button class="button" id="add-button">Adicionar outra experiência</button>
</div>
</body>
</html>
$(document).ready(function () {
    var clone = $('#wrap-form').html();
    $(document).on('click', '#add-button', addProd);

    function addProd() {
        $('#wrap-form').append(clone);
        ids();
    }

    $(document).on('click', '.excluir_form', function () {
        $(this).parents('.formulario-experiencia').remove();
        ids();
    });

    function ids() {
        $("[name='index_form[]']").each(function (i, e) {
            $(e).val(i + 1);
        });
    }
})

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 .