Cadastro de conteudo, formulário adiciona dados em tabela temporária
Salve salve!
Novamente, para termos algo, precisamos da iniciativa de começar.
Requisito:
“Um formulário simples, irá adicionando dados numa tabela html temporária, para depois enviar tudo de uma só vez para o banco.”
Do começo:
“Um formulário simples, ..
<form action="" method="post" id="form_prepare"> <fieldset> <label>Nome: <input type="text" name="nome" /></label> <label>Telefone: <input type="text" name="email" /></label> <label>Email: <input type="text" name="telefone" /></label> <label><input type="submit" name="ok" value="Ok" /></label> </fieldset> </form><!-- /form_prepare -->
A outra parte:
“… numa tabela html temporária,…
<table id="grid"> <thead> <tr> <th>Nome</th> <th>Telefone</th> <th>Email</th> </tr> </thead> <tbody> </tbody> </table><!-- /grid -->
Importante isso. Começamos do início. Do HTML.
A parte JavaScript
Agora, segundo nosso briefing, o formulário deve ir adicionando os itens nessa tabela. Aqui que entra, a responsabilidade client-side, afinal, precisamos adicionar os itens nessa tabela temporariamente, sem refresh [ e atenção, pois isso não significa, e nem quer dizer ajax. ‘Sem refresh’, quer dizer client-side, mas não necessariamente precisamos de ajax.
<script type="text/javascript"> $(document).ready(function(){ $('#form_prepare').submit(function(){ var $this = $( this ); var tr = '<tr>'+ '<td>'+$this.find("input[name='nome']").val()+'</td>'+ '<td>'+$this.find("input[name='email']").val()+'</td>'+ '<td>'+$this.find("input[name='telefone']").val()+'</td>'+ '</tr>' $('#grid').find('tbody').append( tr ); return false; }); }); </script>
Tranquilo até aqui, certo ?
no evento onSubmit do meu formulário, disparo essa function javascript, que lê o que está digitado nos inputs deste form, e faz um append lá na minha <table>
Só ficou faltando um pedaço, pois precisamos desses dados ‘para depois’.
A minha escolha será adicionar inputs type=”hidden”, em um outro formulário, e este sim, será responsável por enviar todos os dados da nossa table temporaria, para o servidor.
<form action="" method="post" id="form_insert"> <fieldset style="display: none;"></fieldset> <label><input type="submit" name="cadastrar" value="Cadastrar" /></label> </form>
O JS desse trecho:
var hiddens = '<input type="hidden" name="nome[]" value="'+nome+'" />'+ '<input type="hidden" name="email[]" value="'+email+'" />'+ '<input type="hidden" name="telefone[]" value="'+telefone+'" />'; $('#form_insert').find('fieldset').append( hiddens );
Prosseguindo..
A parte PHP
Necessário nesse trecho, entendermos que trabalhar com array, simplifica todo o processo.
<?php if( $_SERVER['REQUEST_METHOD']=='POST' ) { $sql = "INSERT INTO cliente ( id, nome, email, telefone ) VALUES "; $values = Array(); for( $i=0; $i<count( $_POST['nome'] ); $i++ ) { $values[] = "(NULL, '".filter( $_POST['nome'][$i] )."', '".filter( $_POST['email'][$i] )."', '".filter( $_POST['telefone'][$i] )."')"; } echo $sql.implode( ',', $values ); } function filter( $str ){ return addslashes( $str );//deixo demais filtros e validações por sua conta } ?>
Os inputs hidden que serão adicionados, são do tipo:
<input type="hidden" name="email[]" value="valor" />
Logo, receberemos um array: $_POST[‘email’], com as posições: $_POST[‘email’][0], $_POST[‘email’][1]…
O código completo, então:
<?php if( $_SERVER['REQUEST_METHOD']=='POST' ) { $sql = "INSERT INTO cliente ( id, nome, email, telefone ) VALUES "; $values = Array(); for( $i=0; $i<count( $_POST['nome'] ); $i++ ) { $values[] = "(NULL, '".filter( $_POST['nome'][$i] )."', '".filter( $_POST['email'][$i] )."', '".filter( $_POST['telefone'][$i] )."')"; } echo $sql.implode( ',', $values ); } function filter( $str ){ return addslashes( $str );//deixo demais filtros e validações por sua conta } ?> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#form_prepare').submit(function(){ var $this = $( this ); var nome = $this.find("input[name='nome']").val(), email = $this.find("input[name='email']").val(), telefone = $this.find("input[name='telefone']").val(); var tr = '<tr>'+ '<td>'+nome+'</td>'+ '<td>'+email+'</td>'+ '<td>'+telefone+'</td>'+ '</tr>' $('#grid').find('tbody').append( tr ); var hiddens = '<input type="hidden" name="nome[]" value="'+nome+'" />'+ '<input type="hidden" name="email[]" value="'+email+'" />'+ '<input type="hidden" name="telefone[]" value="'+telefone+'" />'; $('#form_insert').find('fieldset').append( hiddens ); return false; }); }); </script> <style type="text/css"> #main { width: 700px; margin: 0 auto; } </style> </head> <body> <div id="main"> <form action="" method="post" id="form_prepare"> <fieldset> <label>Nome: <input type="text" name="nome" /></label> <label>Telefone: <input type="text" name="email" /></label> <label>Email: <input type="text" name="telefone" /></label> <label><input type="submit" name="ok" value="Ok" /></label> </fieldset> </form><!-- /form_prepare --> <table id="grid"> <thead> <tr> <th>Nome</th> <th>Telefone</th> <th>Email</th> </tr> </thead> <tbody> </tbody> </table><!-- /grid --> <form action="" method="post" id="form_insert"> <fieldset style="display: none;"></fieldset> <label><input type="submit" name="cadastrar" value="Cadastrar" /></label> </form><!-- /form_insert --> </div><!-- /main --> </body> </html>
Saída que obtive:
INSERT INTO cliente ( id, nome, email, telefone ) VALUES (NULL, 'William', '(21) 1234-4567','email@teste.com.br'),(NULL, 'Bruno', '(21) 1234-1234','email@teste.com')
Demonstração Online
É isso =)