5

Hoje eu e um amigo pensamos em desenvolver um sistema para cadastro de currículos, só que eu preciso que ao clicar em um link adicione mais 1 bloco de inputs cada vez que clicado. Eu tentei pesquisar, e não encontrei fontes agradáveis, ou seja não soube como pesquisar.

Vejam a imagem abaixo para entender melhor:

inserir a descrição da imagem aqui

Obs: estou usando Codeigniter se ele tiver algum helper que faça isso.

12
  • 2
    Você deve ter feito alguma coisa. Senão, deveria começar do começo. Além disso, por que a tag JQuery? Por que você presume que a solução para o problema é em JQuery? 3/03/2016 às 0:32
  • 1
    Então você precisa fazer AJAX? Você deveria mencionar isso na pergunta. E, sim, JQuery tem facilidades para AJAX, mas não é obrigatório. JQuery é só uma biblioteca. Por que não começa tentando aprender a fazer o AJAX e, depois que já estiver conseguindo os dados (imprimindo na tela, por exemplo), volta e faz uma pergunta mais específica? É difícil responder perguntas tão amplas assim, mesmo que tentemos. Não seria uma resposta e sim um tutorial 3/03/2016 às 0:38
  • 4
    @GuilhermeSpinXO nao precisa pedir desculpas, só que não queira resolver tudo em uma pergunta só. Vá montando seu código, ou vendo exemplos aqui no site, e quando tiver uma dúvida sobre cada uma das etapas, pode perguntar separadamente como resolver cada uma. O importante é fazer a coisa acontecer passo a passo. Estamos todos aqui pra ajudar, mas é bom que as perguntas sejam bem objetivas. Tem umas dicas legais aqui: Como perguntar e no FAQ da Comunidade tem umas coisas que dão uma noção melhor de como o site funciona.
    – Largato
    3/03/2016 às 0:42
  • 1
    @GuilhermeSpinXO Veja se isso aqui te ajuda: Como fazer um formulário dinâmico?.
    – Largato
    3/03/2016 às 0:48
  • 2
    @GuilhermeSpinXO ótimo que encontrou. Dê uma lidinha nos links que eu recomendei, sobre como perguntar, assim quando você tiver dúvidas e fizer novas perguntas, pode aproveitar melhor o site. A comunidade vai ter mais facilidade de ajudar se a pergunta for mais objetiva (e contiver algum código pra ser usado como base). Assim, você "ajuda a gente a te ajudar" :)
    – Largato
    3/03/2016 às 0:54

2 Respostas 2

3

Veja só:

  • Se inserir vários <input> sem atributo name, eles nem serão submetidos.
  • Se inserir vários <input> com o mesmo valor no atributo name, somente o último será submetido.

Isso que você está querendo fazer merece um pouco mais de cuidado, não é simplesmente inserir um <input> atrás do outro. Aliás, pode até ser, desde que não precise recuperar esses dados posteriormente e acredito que o objetivo não é esse.

O que você pode fazer é:

  • Ter vários <input> com o atributo name sendo um array. No servidor você por iterar sobre esse array e recuperar os dados. Por exemplo:
<input type='text' name='empresas[]' placeholder='Nome da empresa 1'/>
<input type='text' name='empresas[]' placeholder='Nome da empresa 2'/> <!-- s/ problemas -->

Ou então...

  • Definir o valor do atributo name sendo empresa-x, onde x é o "índice do campo" e este número que deve ser incrementado cada vez que um novo input for inserido no formulário. Nesse caso você deve clonar o último elemento, incrementar o valor de x e inserir no final do formulário.
<input type='text' name='empresa-1' placeholder='Nome da empresa 1'/>
<input type='text' name='empresa-2' placeholder='Nome da empresa 2'/>
<!-- ... -->

A primeira é mais simples, pois só é preciso clonar o elemento. A segunda é um pouco mais chata de fazer por ser necessário incrementar o número do índice e substituir todos os atributos name, mas nada complicado. Vai depender de como você quer obter esses dados no servidor mais tarde.

Clonando com Array

$(function(){
  $('button').on('click', function(){
    $('.info-block:first').clone().insertAfter('.info-block:last');
  });
});
.info-block { padding: 10px; border: 1px solid #ccc }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='container'>
 
  <!-- bloco que será clonado -->
  <div class='info-block'>
    <input type='text' name='empresas[]' placeholder='Empresa'/>
    <input type='text' name='escolas[]' placeholder='Escola'/>
    <!-- outros campos... -->
  </div>
</div>

<button>Adicionar + campos</button>

Clonando incrementando

Nesse segundo exemplo, para ficar mais fácil controlar o índice eu criei um <span> como se fosse um contador. Por meio dele é possível obter o último índice para incrementá-lo e clonar o bloco.

$(function(){

  $('button').on('click', function(){
    
    var $bloco = $('.info-block:last').clone(), 
        indice  = parseInt($bloco.find('span').text()) + 1; 
    
    $bloco.find('span').text(indice);
    $bloco.find('input[name^="empresa-"]').attr('name', 'empresa-' + indice);
    $bloco.find('input[name^="escola-"]').attr('name', 'escola-' + indice);
    
    // Se ouver outros inputs, altera o atributo name deles com o índice
    
    $bloco.insertAfter('.info-block:last');
  
  });
});
.info-block { padding: 10px; border: 1px solid #ccc }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='container'>

  <!-- bloco que será clonado -->
  <div class='info-block'>
    <span>1</span>
    <input type='text' name='empresa-1' placeholder='Empresa' />
    <input type='text' name='escola-1' placeholder='Escola' />
    <!-- outros campos... -->
  </div>
</div>

<button>Adicionar + campos</button>

5
  • 1
    Funcionou perfeitamente, melhor que o que tinha feito antes muito obrigado @renan 3/03/2016 às 9:28
  • renan, estou envolvido em um projeto parecido, então preciso fazer isso novamente... tem como gerar os name diferente? exemplo name="experiencia1" name="experiencia2" name="experiencia3", desculpa reativar o tópico, mas preferi reutilizar do que criar outro. 7/04/2016 às 3:25
  • 1
    O segundo exemplo não resolve? Clonar incrementando. 7/04/2016 às 3:35
  • Deu certinho valeu. 7/04/2016 às 15:04
  • @RenanGomes como seria pra remover um bloco clonado? 19/02/2021 às 5:43
2

Supondo o html:

<div class='dados'>
  <input type="text" value="" />
</div>
<a href="javascript:void(0);" id="btnAdd">+</a>

Ao clicar no botão, através de um evento jQuery, você resolve o problema:

$("#btnAdd").click(function() {
    $(".dados").append('<input type="text" value="" />');
});

Teste com este fiddle

4
  • Vou testa-lo, se funcionar marco como resolvido, mas uma dúvida, no lugar no append('posso trocar aqui pra o id da div que quero que duplique?') 3/03/2016 às 0:58
  • se quiser duplicar uma div com um determinado id, pode sim: $(".dados").append($("#id_da_div_para_duplicar")); 3/03/2016 às 0:59
  • Deu certo, porém troquei o append(), coloquei append("#formCursos") e ao invez de imprimir na tela o form, apareceu a string #formCursos 3/03/2016 às 1:02
  • tá faltando o "$": .append($("#formCursos")); 3/03/2016 às 1:04

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 .