2

Estou criando um formulário com abas e tenho que duplicar um conjunto de inputs a uma outra linha e queria ajuda para fazer isso. Estou usando bootstrap e aí está o trecho do código a ser duplicado.

<form class="formulario" role="form">
  <div class="tab-content">
    
    <div class="tab-pane active" role="tabpanel" id="step1">
      <div class="row">
        <h4>
            <i class="fa fa-comments"></i>
            Encontros presenciais
        </h4>
        </div>

        <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label for="local-encontpresen">Local:</label>
                <input type="text" class="form-control" name="local-encontpresen" id="local-encontpresen">
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group">
                <label for="data-encontpresen">Data:</label>
                <input type="date" class="form-control" name="data-encontpresen" id="data-encontpresen">
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group">
                <label for="tipo-avl-encontpresen">Tipo de Avaliação:</label>
                <select id="tipo-avl-encontpresen" class="form-control">
                    <option hidden="true">Selecione</option>
                    <option>Prova tradicional</option>
                    <option>Prova via Moodle</option>
                </select>
            </div>
        </div>
        
        <div class="col-md-1">
            <div class="form-group">
                <label for="peso-encontpresen">Peso:</label>
                <input type="number" class="form-control" name="peso-encontpresen" id="peso-encontpresen" step="1" min="0">
            </div>
        </div>

        <div class="col-md-1">
             <div class="form-group">
                 <button class="btn-adicionar">Adicionar</button>
                 <button class="btn-adicionar">Adicionar</button>
             </div>
        </div>
      </div>
    </div>
    
    <div class="row">
      <ul class="list-inline pull-right">
        <li><button type="button" class="btn btn-primary next-step">Salvar e continuar</button></li>
      </ul>
    </div>
    
  </div>
</form>

Botões De adicionar e remover no final da **row**

Nessa segunda imagem tenho a imagem das abas criadas:

Segunda imagem das abas

Link do projeto no Github

2
  • Pq tem 2 botões "Adicionar"?
    – Sam
    Commented 21/06/2018 às 3:30
  • Esqueci de editar... Era para simular um adicionar e outro remover..
    – Ennahpets
    Commented 21/06/2018 às 4:02

1 Resposta 1

2

Como você pretende criar vários elementos com o mesmo name, deveria convertê-los em array adicionando [] ao name:

Ex.: name="peso-encontpresen[]"

Para duplicar você pode criar uma variável com o HTML da div que contém os elementos do formulário:

var clone_step1 = $("#step1").find(".row:eq(1)").html(); // cópia da div com os inputs
$(document).on("click", ".btn-adicionar", function(e){
   $("#step1")
   .find(".row:eq(1)")
   .append(clone_step1); // insere nova linha

   $(this)
   .closest(".col-md-1")
   .remove(); // remove o botão adicionar
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<form class="formulario" role="form">
   <div class="tab-content">
      <div class="tab-pane active" role="tabpanel" id="step1">
         <div class="row">
            <h4>
               <i class="fa fa-comments"></i>
               Encontros presenciais
            </h4>
         </div>
         <div class="row">
            <div class="col-md-4">
               <div class="form-group">
                  <label for="local-encontpresen">Local:</label>
                  <input type="text" class="form-control" name="local-encontpresen[]" id="local-encontpresen">
               </div>
            </div>
            <div class="col-md-3">
               <div class="form-group">
                  <label for="data-encontpresen">Data:</label>
                  <input type="date" class="form-control" name="data-encontpresen[]" id="data-encontpresen">
               </div>
            </div>
            <div class="col-md-3">
               <div class="form-group">
                  <label for="tipo-avl-encontpresen">Tipo de Avaliação:</label>
                  <select id="tipo-avl-encontpresen" class="form-control">
                     <option hidden="true">Selecione</option>
                     <option>Prova tradicional</option>
                     <option>Prova via Moodle</option>
                  </select>
               </div>
            </div>
            <div class="col-md-1">
               <div class="form-group">
                  <label for="peso-encontpresen">Peso:</label>
                  <input type="number" class="form-control" name="peso-encontpresen[]" id="peso-encontpresen" step="1" min="0">
               </div>
            </div>
            <div class="col-md-1">
               <div class="form-group">
                  <button class="btn-adicionar">Adicionar</button>
               </div>
            </div>
         </div>
      </div>
      <div class="row">
         <ul class="list-inline pull-right">
            <li><button type="button" class="btn btn-primary next-step">Salvar e continuar</button></li>
         </ul>
      </div>
   </div>
</form>

10
  • Como eu disse, não sei se é pelo fato de ele estar dentro de uma tab, mas quando faço isso que vc me sugeriu, ele simplesmente esconde o botão de adicionar e não duplica nenhuma linha.
    – Ennahpets
    Commented 22/06/2018 às 3:37
  • Entao tem q ver o codigo direitinho. Agora eu nao posso pq estou no celular, mas amanha eu vejo direitinho blz?
    – Sam
    Commented 22/06/2018 às 3:58
  • Veja se está chamando o código APÓS o html ter sido carregado. Pode ser que isso não esteja acontecendo e o código não acha o html e a variável var clone_step1 = $("#step1").find(".row:eq(1)").html(); fica vazia.
    – Sam
    Commented 22/06/2018 às 12:06
  • Estou colocando em um .js e chamando ele dentro do head.
    – Ennahpets
    Commented 22/06/2018 às 12:24
  • Então é isso... coloque dentro de um $(document).ready(function(){ código aqui });
    – Sam
    Commented 22/06/2018 às 12:50

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 .