Bom galera , é o primeiro post aqui 
e venho trazer a vocês uma forma de otimizar as páginas de cadastro com um formulário dinâmico através do jQuery.
Qual a ideia ?
A princípio a ideia é inserir o formulário de acordo com a demanda, não sobrecarregando a página com elementos que possivelmente não iram ser usados e identificar cada campo com o atributo name diferente para recuperá-los mais tarde. Bom, acho que consegui me expressar … então vamos botar a mão na massa!
HTML
Primeiramente precisamos de nosso formulário
<form method="get" action="processa.php">
<table>
<thead>
<tr>
<th>Item</th>
<th>Quantidade</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="item1" size="60" /></td>
<td><input type="text" name="quantidade1" size="10" /></td>
</tr>
</tbody>
</table>
<!--Irá armazenar a quantidade de linhas-->
<input type="hidden" value="1" name="quantidade_itens" />
</form>
Agora precisamos de dois elementos que posteriormente irão disparar o envio do formulário e a inserção de novos inputs.
<a href="#" id="enviar">Enviar lista de compras</a>
<a href="#" id="mais">Add Item</a>
jQuery
Para enviar o formulário, iremos associar o seu método .submit() ao evento .click() de um dos elementos que criamos para este fim. Aqui utilizaremos o link com id enviar.
// JavaScript Document
$('#enviar').click(function(){
$('form').submit();
});
E Agora o X da questão!
Dentro do evento .click() do link com id mais vamos:
- Armazenar numa variável a quantidade de linhas de nossa tabela.
- Inserir o código html da linha que contém os inputs com a propriedade
name concatenada com o número da linha a ser inserida que armazenamos na variável next.
- E por fim atualizar o valor do elemento
:hidden que usamos para armazenar a quantidade de linhas.
$('#mais').click(function(){
//recuperando o próximo numero da linha
var next = $('#lista tbody').children('tr').length + 1;
//inserindo formulário
$('#lista tbody').append('<tr>' +
'<td><input type="text" name="item' + next + '" /></td>' +
'<td><input type="text" name="quantidade' + next + '" /></td>' +
'</tr>');
//armazenando a quantidade de linhas ou registros no elemento hidden
$(':hidden').val(next);
return false;
});
Mas pra que serve saber a quantidade de linhas de registros neste formulário ?
É simples, como criamos o formulário dinâmico, devemos informar à página que irá receber os dados qual a quantidade de registros que ela irá receber.
Pronto, o script já está funcionando. Mas para um melhor entendimento mostraremos como a página irá receber estes dados.
PHP
A pagina deverá conter uma variável para recuperar a quantidade de itens, (lembra aquela que comentamos ?) e um loop que terá como limite nossa variável.
Dentro dele basta recuperar os valores concatenando a propriedade name do campo com o número da repetição.
<?php
$quantidade_itens = $_GET['quantidade_itens'];
for ( $x = 1; $x <= $quantidade_itens ; $x++ ){
$item = $_GET["item$x"];
$quantidade = $_GET["quantidade$x"];
//aqui seu código com o uso dos valores capturados
}
?>
Veja a
Demo
O que fizemos basicamente ?
Inserimos através do método .append() os inputs com o atributo name concatenado com a quantidade de linhas mais 1, que atribuímos à variável quantidade. Sendo assim somente o final da propriedade name irá mudar , facilitando a recepção dos dados por outra página. Implementando então uma inserção dinâmica onde todos os valores poderão ser capturados.
Obs:. É bom lembra que essa é “uma” das formas de se fazer … cada um pode implementar da maneira que quiser mas o conceito , como já mencionei, é sempre o mesmo.
Atenção para a dica:
Aqui não foi associado nenhum evento aos inputs, mas se necessário, é preciso utilizar o método .live() para que este evento se estenda a todos os inputs.
Um abraço e até o próximo post!
.
ASSINE NOSSO FEED:TODOS OS POSTS
SIGA-NOS NO TWITTER:@JQUERYBR
FIQUE LIGADO NOS PODCASTS:ITUNES
