Formulário dinâmico com jQuery

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:

1. Armazenar numa variável a quantidade de linhas de nossa tabela.
2. 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.
3. 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!