Adicionando campos ao formulário com JQuery

Olá…

Bom, após um pouco mais de um ano sem escrever nada aqui, cá estou para um tutorial básico e rápido de como adicionar campos ao formulário utilizando JQuery.

Eu fiz uma pesquisa rápida na internet pra ver se encontrava algo parecido para um projeto pessoal que estou desenvolvendo e só achei exemplos ou em inglês(que teoricamente não é um problema) ou muito complexo pra fazer um negócio simples ou as duas coisas.

Enfim, vamos ao que interessa.

Vamos precisar dos seguintes ingredientes:

- JQuery -> http://jquery.com/

- Um editor de texto da sua prefêrencia.

- E no seu caso, leitor, coordenação motora para copiar e colar…(rs)

Brincadeiras a parte vamos começar.

A idéia é construir um formulário onde campos possam ser adicionados(telefone, por exemplo) no momento do cadastro. É uma forma de implementar relacionamento 1:N.

A linguagem de programação pouco importa… vamos usar o javascript para fazer essa mágica aqui.

<form action="" method="post">
	<label for="name">Nome:</label><input type="text" name="name" value="" id="name" />
	<div id="phones">
		<div id="phone_0">
			<input type="text" name="phones[][number]" value="" id="phones[][number]" />
		</div>
	</div>
</form>

Um formulário bem simples para cadastro de nome e telefone.
- A div “phones” será a div que receberá as outras divs com campos para telefone
- O name e o id do campo telefone acima é um padrão utilizado para ser lido após o envio do form(dessa forma eu estou dizendo que o conteúdo é um array e não uma string)
A idéia básica é adicionar uma outra div dentro da div “phones” contendo um campo de texto.
A regra diz, que o meu contato deve possuir ao menos um telefone. Mais a frente vocês irão entender o por do id do campo ser “
phone_0″
Adicione a chamada do JQuery no seu html:
<script src="/javascript/jquery-1.6.2.js" type="text/javascript" charset="utf-8"></script>
e abra uma tag script também:
<script type="text/javascript" charset="utf-8"></script>

É nela que vamos adicionar o nosso maravilhoso e complexo(cof!) código.

Primeiro vamos criar uma função para remover os campos…



function removeField(obj){
	$(obj).remove();
}

Explicando:

Essa função recebe um parâmetro e via JQuery($)(que será o id do elemento) pega esse objeto e remove ele do html.(Bem intuitivo, não?)

Agora iremos criar a função que adiciona o campo na tela:



function addField(objId,selectedId,typeField,nameIdField){
	divPai = $("#"+objId);
	time = new Date().getTime();
	selectedId = selectedId+"_"+time;
	fieldContent = "<div id='"+selectedId+"' >";
	fieldContent += "<input type='"+typeField+"' name='"+nameIdField+"' value='' id='"+nameIdField +"'>";
	fieldContent += "<a href='javascript:;' onclick='javascript:removeField("+selectedId+");'>Remover</a>";
	fieldContent += "</div>"
	divPai.append(fieldContent);
}

Edit: 

A linha que está rabiscada está incorreta(testei somente no Google Chrome e magicamente, funcionou) a correta seria:

fieldContent += “<a href=’javascript:;’ onclick=’javascript:removeField(“+”\”"+selectedId+”\”"+”);’>Remover</a>”;

Explicando:

Esta função recebe um pouco mais de parâmetros, mas segue a descrição de cada um:
objId -> Objeto que recebera o novo campo(div)
selectedId -> id para ser concatenado com o time
typeField -> tipo do campo a ser criado(text, field, hidden)(bem básico mesmo)
nameIdField -> nome e id do campo criado.

O grande lance aqui é prestar a atenção na variável “selectedId”, pois é ela que irá deixar as nossas divs únicas.
O que foi feito, foi pegar o id passado e concatenar com a data atual em millisegundos(nunca vai se repetir).
Antes disso só pegamos o elemento que queremos adicionar o campo – $(“#”+objId); – para poder trabalhar com mais facilidade.
Depois só montamos a string contendo os elementos desejados (fieldContent) e adicionamos ao elemento utilizando JQuery – divPai.append(fieldContent); .
Perceba que no código gerado na variável fieldContent já montamos com a chamada para o método de remoção do campo.
Bom temos as nossas duas funções criadas e pronta para serem utilizadas.
Adicione a seguinte linha ao seu formulário:

<a href="javascript:;" onclick="javascript:addField('phones','phone','text','phones[][number]');">Adicionar telefone +</a> <br /><br />


Explicando:
Esta linha, simplesmente faz uma chamada ao médodo addField, passando os parâmetros já mencionados acima.

Talvez tenha-se problemas caso o formulário possua um css aplicado. Nesse caso, deve já criar a string no javascript com o estilo desejado.
Tá feito.

Abraços até a próxima.