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.
