Um componente muito util para formulários é você poder adicionar campos dinâmicamente em seu formulário, por exemplo… Em um formulário de cadastro de uma pessoa, você precisa que ele preencha o formulário com todos os telefones dela.

Mas você não sabe quantos telefones essa pessoa tem. Então precisamos que ela possa adicionar campos nesse formulário, vou mostrar uma forma bem fácil de você resolver esse problema usando novamente a biblioteca JQuery.

No nosso index.html faremos nosso formulário…
 HTML |  copy code |? 
01
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
02
	        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
03
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
04
	<head>
05
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
06
		<title>Exemplo</title>
07
		<script type="text/javascript" src="jquery.js"></script>
08
		<script type="text/javascript" src="aplicacao.js"></script>
09
	</head>
10
 
11
	<body>
12
		<div style="border:1px solid #CCC; background-color:#EFEFEF; padding:0 20px;">
13
			<h1>Exemplo Campos Din&acirc;micos</h1>
14
			<p>Esse arquivo &eacute; parte de um arquivo feito por Maur&iacute;cio Faustino para mostrar como um formul&aacute;rio com campos din&acirc;micos</p>
15
 
16
		</div>
17
		<div style="width:500px; margin:auto;">
18
 
19
			<form action="mantemPessoas.php" method="post">
20
				<fieldset>
21
				<legend>Dados Pessoais</legend>
22
				<p>
23
					<label for="nome">Nome da Pessoa</label>
24
					<input id="nome" type="text" name="nome" />
25
				</p>
26
				<p>
27
					<label for="dataNascimento">Data de Nascimento</label>
28
					<input id="dataNascimento" type="text" name="dataNascimento" />
29
				</p>
30
				</fieldset>
31
				<fieldset>
32
				<legend>Telefones</legend>
33
				<div class="telefones">
34
				<p class="campoTelefone">
35
					<input type="text" name="telefone[]" />
36
					<a href="#" class="removerCampo">Remover Campo</a>
37
				</p>
38
				</div>
39
				<p>
40
					<a href="#" class="adicionarCampo">Adicionar Telefone</a>
41
				</p>
42
				</fieldset>
43
 
44
			</form>
45
			<a href="http://www.mauriciofaustino.com/2009/04/adicionar-campos-dinamicos/">Voltar para o post.</a>
46
		</div>
47
	</body>
48
</html>
Lembrando que você precisa ter o arquivo da biblioteca jquery na mesma pasta do seu index.

O nosso aplicacao.js ficaria assim:
 Javascript |  copy code |? 
01
$(function () {
02
	function removeCampo() {
03
		$(".removerCampo").unbind("click");
04
		$(".removerCampo").bind("click", function () {
05
			i=0;
06
			$(".telefones p.campoTelefone").each(function () {
07
				i++;
08
			});
09
			if (i>1) {
10
				$(this).parent().remove();
11
			}
12
		});
13
	}
14
	removeCampo();
15
	$(".adicionarCampo").click(function () {
16
		novoCampo = $(".telefones p.campoTelefone:first").clone();
17
		novoCampo.find("input").val("");
18
		novoCampo.insertAfter(".telefones p.campoTelefone:last");
19
		removeCampo();
20
	});
21
});
Vamos explicar o que foi feito:

Linha 1 - Define o código JQuery que será rodado no carregamento da página.

Linha 2 - Declara uma função chamada removeCampo.

Linha 3 - Tira qualquer função que esteja setada para ser executada quando o elemento com a classe removerCampo seja clicado.

Linha 4 - Quando um elemento com a classe removerCampo for clicado executará a seguinte função.

Linha 5 - Teclara uma variavel i igual a zero.

Linha 6 - Para cada p com a classe campo telefone dentro de um elemento com a class telefones executará a seguinte função.

Linha 7 - Incrementa a variavel i (a linha 5 e 6 servem para contar quantos p.campoTelefone existem dentro do elemento com a classe telefones).

Linha 9 - Se i for maior que 1 (se esse não for o unico elemento dentro da div telefones.

Linha 10 - Remove o pai do link clicado, ou seja, o p.campoTelefone.

Linha 14 - Executa a função removeCampo().

Linha 15 - Quando um elemento com a classe adicionarCampo for clicado.

Linha 16 - Clona o primeiro p com a classe campoTelefone e insere em uma variável que chamei de novoCampo.

Linha 17 - Procura dentro do elemento novoCampo um input e seta o value dele como vazio.

Linha 18 - Insere o elemento novoCampo depois do ultimo p com a classe campoTelefone.

Linha 19 - Executa a função removeCampo.

E está feito nosso componente de adicionar campos de telefone dinamicamente. Se você não entendeu porque eu tieve que executar a função removeCampo duas vezes, leia o artigo AJAX - Primeiros Problemas onde tem uma explicação melhor sobre esse assunto.

Quando esse formulário for submetido você receberá em seu PHP um array de telefones.

Gostaram?

Você pode ver esse exemplo funcionando clicando aqui.

Tags: ,

Esse post foi publicado de quinta-feira, 2 de abril de 2009 às 14:33, e arquivado em JQuery. Você pode acompanhar os comentários desse post através do feed RSS 2.0. Você pode comentar ou mandar um trackback do seu site pra cá.