jQuery: Duplicar campos de formulários

Blog

- jQuery: Duplicar campos de formulários
- Enviado em 09/09/2010 16:12
- Olá! Seguindo a dica do Felipe França, hoje vamos aprender a duplicar campos de formulários com o jQuery. Veja como é simples!
  Primeiro, o formulário em HTML...
```
<form action="form.php" method="post">
    <table cellpadding="4" cellspacing="0" border="1">
        <thead>
            <tr>
                <td>Dia</td>
                <td>Hora</td>
                <td>Resultado</td>
            </tr>            
        </thead>
        <tbody id="repetir">
            <tr>
                <td><input type="text" name="dia[]" value="" /></td>
                <td><input type="text" name="hora[]" value="" /></td>
                <td><input type="text" name="resultado[]" value="" /></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td align="right" colspan="3"><input type="button" value="Adicionar" id="add" /><input type="submit" value="Enviar" /></td>
            </tr>
        </tfoot>
    </table>
</form>
```
  Depois, a função em jQuery que vai duplicar os campos...
```
$(function()
{
	
	/* Quando o botão adicionar for clicado... */
	$('input#add').click(function()
	{
		
		/* Pega uma linha existente */
		var linha = $('tbody#repetir tr').html();
		
		/* Acrescenta uma nova linha */
		$('tbody#repetir').append('<tr>' + linha + '</tr>');
		
	});
	
});
```
  Confira uma demonstração clicando aqui.
  
  Importante: Saiu uma versão atualizada deste script! :D
  
  Abraços a todos :)
Tweet
- - Felipe comentou em 09/09/2010 16:16:
  - "Torne tão simples, que pareça complexo". Ótimo script criado pelo Guilherme, me economizou bastante tempo. Parabéns !
- - Fábio Lima comentou em 11/03/2011 05:19:
  - Muito bom! A partir deste exemplo temos infinitas possibilidades! Parabéns pelo script!
- - Asp.net Developer comentou em 10/05/2011 14:36:
  - Mt Bom o Script, bastnt util....Mas ficou uma duvida, caso eu queira apagar um campo por vez, ou seja, do lado de cada campo eu gere um botão, e este botão tenha a função de deletar o campo do lado, Como eu faria???
- - Guilherme comentou em 10/05/2011 16:33:
  - Olá "Asp.net Developer"! A melhor forma seria criando uma ID associada para cada TR, ou seja, para cada linha, e no botão "excluir", um comando jQuery para destruir uma linha específica, cuja função necessária para isso seria $.(elemento).remove();
- - Adriano Surycaty comentou em 16/05/2011 11:48:
  - Show, parabens, muito facil e rapido.
- - Karen comentou em 17/02/2012 16:32:
  - Nossa, eu queria EXATAMENTE essa função, mas para um formulário do access. Tem dicas de como ou onde posso encontrar uma forma de fazê-lo?
- - Guilherme comentou em 18/02/2012 01:46:
  - Olá Karen! Me envie através do formulário de contato deste site como funcionaria esse formulário do Access. Talvez posso ajuda-la. Abraço.
- - Ricardo comentou em 14/05/2012 09:13:
  - Eu estava procurando por isso, encontrei códigos enormes só para fazer isso, obrigado por tornar minha vida mais simples. :-) Abraços.
- - Guilherme comentou em 14/05/2012 10:16:
  - Olá André! Fico feliz que tenha ajudado ;) Abraço!
Envie seu comentário!

Comentário

Nome:

E-mail: (Não será divulgado)

Site ou blog: (Opcional)

Comentário: (Máximo de 255 caracteres)

Enviar

Veja também:

Blog

Primeiro, o formulário em HTML...

Depois, a função em jQuery que vai duplicar os campos...

Comentário

Veja também: