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"> 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><!-- /form_insert -->

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:

sql 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 =)