Como limpar campos de formulários após ter dado submit

[F_Jr 0]

E pessoal beleza?

 

A minha dúvida é o seguinte como limpar um campo de formulário após ter dado um submit? Por exemplo tenho este código aqui em baixo que irá chamar o meu formulário de bairro.

 

if($acao == 'inserirbai') {
  require('form/form_bairro.php');
}

 

O código abaixo é o meu formulário ao qual poderei inserir o nome do bairro.

 

<div id="form">
 <fieldset>
   <form action="index.php" name="form_bairro" method="post">
     <input type="hidden" name="result" value="bairro" />

     <?php
       if($acao == 'inserirbai'){
          $bairro = "";
          ?>
            <input type="hidden" name="acao" value="salvarbai" />
          <?php
       }
       elseif($acao == 'alterarbai') {
          $bairro = $manutencao->_reg->bai_nome;
          ?>
            <input type="hidden" name="acao" value="atualizarbai" />
            <input type="hidden" name="codigo" value="<?php print $manutencao->_reg->bai_codigo; ?>" />
          <?php
       }
     ?>

     <!--*************************************************************************************-->
     <div id="a1">
       <label for="bairro">Bairro.:</label>
       <div class="div_texbox">
         <input type="text" id="bairro" name="bairro" title="Digite o nome do bairro!" size="42" value="<?php print $bairro;?>" />
       </div>
     </div>

     <!--*************************************************************************************-->
     <div class="button_div">  
       <?php
         if($acao == 'inserirbai'){
            ?>
              <input type="submit" id="cadastrar" name="cadastrar" value="cadastrar" class="buttons" />
            <?php
         }
         elseif($acao == 'alterarbai') {
         ?>
              <input type="submit" id="atualizar" name="atualizar" value="atualizar" class="buttons" />
            <?php
         }
       ?>
       <input type="reset"  id="limpar" name="limpar" value="limpar"  class="buttons" />
       <input type="button" id="voltar" name="Voltar" value="voltar!" class="buttons" onclick="javascript:history.back()" />
     </div>
   </form>
 </fieldset>
</div>

 

Quando clico no botão cadastrar ele irá verificar este código abaixo:

 

if($acao == 'salvarbai') {
  if(empty($_POST['bairro'])) {
     alerta("Favor preencha o campo bairro ou clique no botão voltar!");
     header("Location:index.php?result=bairro&acao=inserirbai");
  }
  else {
     $manutencao->inserirBairro();
     $manutencao->listarBairro();
     require('lista/lista_bairro.php');
     header("refresh:0; index.php?result=bairro&acao=listarbai");
     exit;
  }
}

 

Se estiver tudo ok, ele irá inserir o bairro no banco de dados e será redirecionado para a listagem de bairro. Só que ao voltar para a página anterior clicando nos botões de navegação o campo do formulário não está limpo, possibilitando ao usuário inserir o mesmo registro. Por exemplo entrei no meu formulário e digito dentro do campo texto o nome "teste", feito isto clico no botão cadastrar e ele inseri este registro no banco e ele será redirecionado para a página de listagem de bairro e se eu voltar a página anterior o nome "teste" está dentro do meu campo texto de bairro.

 

1° Depois de várias pesquisas e tentativas, penso o seguinte que se o usuário for inserir um registro e ele tentar voltar a página anterior com os botões de navegação do browser o campo deve estar limpo para inserir um outro registro. Não estou conseguindo fazer isto e olha que fiz teste com cookies e sessões não tive êxito.

 

2° Na minha opinião após o usuário chamar o formulário de bairro e digitar o nome do bairro e cadastrá-lo, este formulário deveria ser destruído, (foi aonde que tentei com sessões mais sem sucesso), para que se o usuário tentasse voltar para a página anterior que é o formulário de bairro ele encontraria a informação de página web expirada, anulando assim a minha primeira observação. Quero saber se existe alguma forma de se fazer este processo. Fazendo com que o usuário insira o registro da forma correta.

 

Assim se possível com o meu código acima quero saber de um exemplo que fiz na 1°observação e com a 2°observação e como poderei estar solucionando este problema. Desde já agradeço pela ajuda.

[mangakah 217]

Há varias opções de se fazer isso.

 

Você pode recarregar a página usando header(Location: ...);

 

Usar javascript para limpar o formulário

<script type="text/javascript">
document.form_bairro.reset();
</script>

 

 

Definir o atributo autocomplete="off" também funciona, mas apenas nos navegadores modernos.

https://developer.mozilla.org/en-US/docs/How_to_Turn_Off_Form_Autocompletion

 

-

 

Isso ocorre porque os navegadores armazenam os dados dos formulários no cache, para poupar o usuário de redigitá-los, se preciso. Essa função vem habilitada por padrão na maioria dos navegadores.

[Gabriel Heming 766]

Só que ao voltar para a página anterior clicando nos botões de navegação

Imagino que isso significa clicar no botão voltar do navegador.

 

Veja bem, diferente de aplicações "desktop" normais, as aplicações web/sites foram feitas para ir somente em uma direção, "para frente". Em primeira instância, após um cadastro, o usuário não deveria clicar em voltar para acessar novamente o formulário de cadastro. Ele deve clicar novamente no link/botão "cadastrar".

 

Como @mangakah já mencionou:

Isso ocorre porque os navegadores armazenam os dados dos formulários no cache, para poupar o usuário de redigitá-los, se preciso.

Quando você lê "se preciso", significa somente quando você precisa realizar uma mesma operação, que provavelmente não foi realizada corretamente, novamente.

 

Por exemplo:

- Entro na página de contato do site para enviar uma solicitação de orçamento;

- Preencho e envio o formulário;

- Somente após enviar o formulário, verifico que escrevi errado meu telefone/e-mail;

 

Uma vez que, um formulário de contato não possui o botão editar, funcionalidade normal em um cadastro por exemplo, ao invés de digitar tudo novamente, simplesmente utilizo o botão voltar do navegador (history.go(1-)) e altero os dados do formulário. Assim, basta enviar o formulário novamente.

 

Veja que isso é uma funcionalidade padrão dos navegadores, o que torna um "facilitador", uma vez que não precisará implementar dados em sessão para não "perder" os registros de um formulário.

 

O código passado pelo @mangakah, pode ser colocado após o término do carregamento do formulário, assim, sempre que entrar na página do formulário, ele será limpo.

[F_Jr 0]

E aí mangakah beleza?

 

Cara tentei colocar este código javascript no final do meu formulário, só que ele não surtiu efeito. Quando você faz a seguinte citação "Você pode recarregar a página usando header(Location: ...);", você está querendo dizer o que realmente, porque estou usando o método header() direcionando de uma página para outra. No link que você passou pra min estudei sobre este assunto e fiz testes com este atributo HTML o autocomplete="off".

<form action="index.php" name="form_bairro" method="post" autocomplete="off">

 

Com o autocomplete="off" no formulário logo depois de cadastrar um novo bairro ele é redirecionado para listagem de bairro e se tentasse voltar a página anterior o campo bairro ficou limpo nos seguintes navegadores: Google Chrome 21, Mozilla Firefox 13 e Safari 5. Nos outros navegadores Internet Explorer 9 e Opera 12 este atributo não funcionou.

 

Aqui no site do imasters vi sobre um determinado assunto "Desabilitar cache com meta tag", claro que estava tratando de outra coisa, só que o assunto deles serviu para min em parte. Eu usei este código abaixo:

 

function limparCache() {
  header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');  
  header('Last Modified: '. gmdate('D, d M Y H:i:s') .' GMT');  
  header('Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0');  
  header('Pragma: no-cache');  
  header("Cache: no-cache");    
  header('Expires: 0');  
}

 

Crie esta função para limpar o cache do browser logo depois de cadastrar um novo bairro e ele foi redirecionado para a listagem de bairros uma pequena observação é que retirei o atributo autocomplete="off", para testar em quais navegadores iam funcionar. O que acontece é o seguinte se eu tentar voltar a página anterior o campo estará limpo nos seguintes navegadores: Mozilla Firefox 13 e Internet Explorer 9. Nos outros navegadores o Google Chrome 21, Opera 12 e Safari 5, a função limparCache não funcionou.

 

Assim mangakah esta idéia de limpar o cache do navegador foi a partir da sua informação quando você citou: "Isso ocorre porque os navegadores armazenam os dados dos formulários no cache", então estava pesquisando como limpar o cache de um navegador, eu chamo esta função quando vou inserir um novo bairro olha o exemplo que eu fiz:

 

if($acao == 'inserirbai') {
  $manutencao->limparCache();
  if(empty($_POST['bairro'])) {
     require('form/form_bairro.php');
  }
}

 

Como disse anteriormente esta função só funcionou no Mozilla Firefox 13 e Internet Explorer 9, claro se eu tentasse voltar a página anterior o campo estaria limpo. Penso o seguinte que não é uma forma eficiente de se fazer, pois depende de que navegador o usuário está usando, creio eu que esta funcionalidade não será para todos os browsers. Em mangakah o código javascript na verdade quero saber se é possível fazê-lo em PHP, e como faria isto.

 

E aí Gabriel Heming beleza?

 

Quando você cita "Imagino que isso significa clicar no botão voltar do navegador.", é realmente isto o que eu quero dizer, porque o usuário pode voltar a página anterior após ter cadastrado um bairro acontecendo duplicação de dados no banco. Mas do jeito que você está falando, após ter dado um submit no botão ele irá cadastrar essas informações que você passou para o formulário e se você tentar voltar para corrigir o telefone/email e dar um submit no botão você estará inserindo um novo registro e não alterando o registro. Creio eu quando você esquece alguma informção no formulário ou preenche dados incorretos e dar um submit no botão, a única forma de corrigí-los é você alterando os dados do formulário.

 

Assim mangakah e Gabriel Heming como faria para anular estas funcionalidades dos navegadores. Não tem um modo de fazer a 2° observação que eu fiz antes de vocês responderem este post? A minha linha racíocinio é parecido com o sistema de login e senha, como posso fazer isto ou não é possível. Há mais uma coisa na função limparCache(), que eu peguei de uma outra explicação como que funciona cada linha de código. Desde já agradeço.

[Gabriel Heming 766]

Bom, sinceramente, eu acredito que não deveria haver a necessidade disso, uma vez que a navegação deve ser só, e somente só, para frente (foward).

 

Já pensou em desabilitar o botão de voltar? Caso isso te ajude, veja isso:

http://viralpatel.net/blogs/disable-back-button-browser-javascript/

 

 

Eu havia me esquecido de uma coisa, mas lembrei que eu falei em um post uns dias atrás:

http://forum.imasters.com.br/topic/472612-como-expirar-uma-pagina-web-em-php/page__view__findpost__p__1876765

 

Só lembrando que, clicar no botão voltar (evento history.go(-1)) é diferente de acessar a página anterior. O voltar somente exibe uma página previamente carregada.

Por isso o script para apagar o formulário não funciona ao clicar no botão voltar. Pois a página já foi carregada, e o botão voltar apenas mostra a página previamente carregada.

[mangakah 217]

Como eu disse... "apenas nos navegadores modernos".

 

IEca é outra coisa...

 

Mesmo que você faça usando PHP você terá que usar cabeçalhos HTTP, que são interpretados pelo navegador. E cada um tem a sua maneira de gerenciar o cache.

 

Você testou o código javascript? Ele funcionou? Entendo que você não queira usar javascript pois não iria funcionar se scripts estiverem desabilitados no navegador.

 

Na função que você criou para limar o cache usando PHP, tente o seguinte:

 

No lugar de

header('Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0');  

 

Coloque

header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', false);

 

E tente também:

header("Cache-Control: must-revalidate, post-check=0, pre-check=0"); 
header("Cache-Control: private",false);

 

-

Observe que por padrão a função header substitui um cabeçalho do mesmo tipo definido anteriormente. Esse comportamento pode ser alterado definindo o segundo argumento como false.

[F_Jr 0]

E ai Gabriel Heming beleza?

 

Em cara quando você faz a seguinte citação: "Só lembrando que, clicar no botão voltar (evento history.go(-1)) é diferente de acessar a página anterior. O voltar somente exibe uma página previamente carregada.", o que você que dizer com isto? Desculpe pela pergunta porque não tenho domínio sobre este assunto. O link que você passou pra min "como desabilitar o botão voltar", ele funcionou em parte, até quero esclarecer com você e com o mangakah a minha dúvida. Vou postar o código abaixo e em seguida estarei explicando o que fiz e o que aconteceu.

 

<div id="form">
 <fieldset>
   <form action="index.php" name="form_bairro" method="post">
     <input type="hidden" name="result" value="bairro" />

     <?php
       if($acao == 'inserirbai'){
          print '<body onload="noBack();" onpageshow="if(event.persisted) noBack();" onunload="">';
          $bairro = "";
          ?>
            <input type="hidden" name="acao" value="salvarbai" />
          <?php
          print '</body>';
       }
       elseif($acao == 'alterarbai') {
          $bairro = $manutencao->_reg->bai_nome;
          ?>
            <input type="hidden" name="acao" value="atualizarbai" />
            <input type="hidden" name="codigo" value="<?php print $manutencao->_reg->bai_codigo; ?>" />
          <?php
       }
     ?>

     <!--*************************************************************************************-->
     <div id="a1">
       <label for="bairro">Bairro.:</label>
       <div class="div_texbox">
         <input type="text" id="bairro" name="bairro" size="42" value="<?php print $bairro;?>" />
       </div>
     </div>

     <!--*************************************************************************************-->
     <div class="button_div">  
       <?php
         if($acao == 'inserirbai'){
            ?>
              <input type="submit" id="cadastrar" name="cadastrar" value="cadastrar" class="buttons" />
            <?php
         }
         elseif($acao == 'alterarbai') {
         ?>
              <input type="submit" id="atualizar" name="atualizar" value="atualizar" class="buttons" />
            <?php
         }
       ?>
       <input type="reset"  id="limpar" name="limpar" value="limpar"  class="buttons" />
       <input type="button" id="voltar" name="Voltar" value="voltar!" class="buttons" onclick="javascript:history.back()" />
     </div>
   </form>
 </fieldset>
</div>

 

Eu trabalhei o código javascript da seguinte forma, mas antes vale ressaltar que possuo três botões no meu formulário que é o de cadastrar se for inserir um novo registro ou de atualizar se for de alterar o registro e acompanhando junto com eles o botão de limpar formulário e o botão de voltar onde ele volta para a página anterior, como vocês pode ver no formulário acima. A forma como trabalhei o código javascript foi a seguinte: se eu for para inserir um novo bairro ele irá chamar o meu formulário de bairros até aqui tudo ok. Mas se decido em cancelar a inserção de um novo registro, clico no botão voltar ou no botão voltar do browser e então sou mandado para a página anterior que é minha listagem de bairros, só que esta funcionalidade está servindo nos navegadores Mozilla Firefox 13, Opera 12 e Safari 5. Já nos navegadores Google Chrome 21 e Internet Explorer 9, não me deram esta possibilidade de voltar a página anterior. Abaixo estarei mostrando o trecho de código mais resumido:

 

<?php
if($acao == 'inserirbai'){
  print '<body onload="noBack();" onpageshow="if(event.persisted) noBack();" onunload="">';
  $bairro = "";
  ?>
    <input type="hidden" name="acao" value="salvarbai" />
  <?php
  print '</body>';
}
?>

 

No código acima vocês podem observar onde abri o corpo da página e onde fechei o corpo da página, o que eu fiz realmente é que esta ação só valerá para inserir ou alterar um novo registro, só que esta ação que eu fiz não surtiu o efeito esperado nos navegadores Google Chrome 21 e Internet Explorer 9. Esta é a função que eu pesquisei e

implementei no meu projeto do link que você passou para min Gabriel Heming. Assim quero saber de uma forma para estar resolvendo este problema do voltar nestas versões do Google Chrome 21 e Internet Explorer 9 e posteriormentes de navegadores antigos.

 

window.history.forward();
function noBack() {
  window.history.forward ();
}

 

E aí mangakah beleza?

 

Cara decide aqui comigo que eu vou implementar o Javascript junto com o PHP no meu projeto, mas o código javascript que você passou pra min ele não funcionou. Assim quero tirar uma dúvida com você, é possível informar ao usuário que o Javascript está desabilitado no browser? E fazer com que o usuário habilite o javascript no browser? Como que eu posso fazer este procedimento no meu projeto. O código que você passou pra min onde você faz a seguinte citação:

 

No lugar de

header('Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0');

 

Coloque

header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', false);

 

Neste código acima o único navegador que não funcionou foi o opera.

 

E tente também:

header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Cache-Control: private",false);

 

E neste código acima foi o Internet Explorer 9 e Opera 12 que não funcionou.

 

Assim Gabriel Heming e mangakah estou fazendo isto porque o projeto precisa de segurança, então eu não sei como é o usuário final, penso o seguinte nós desenvolvedores e/ou programadores temos que estar sempre a frente do usuário final. Vou enfatizar o seguinte um exemplo tenho uma conta no hotmail entro com os meus dados de login e senha e acesso o meu email, faço o que tenho de fazer e colocar para sair. Ele saindo ele será redirecionado para uma outra página e se você tentar voltar pelo botão do navegador ele irá redirecionar para a página de login e senha para entrar com o seus dados no hotmail. Este que x da questão é o que estou precisando e o código que você passou pra min o Gabriel Heming é mais ou menos parecido com isso. Espero ter esclarecido minhas dúvidas e desde já agradeço pela compreensão de vocês. E se vocês tiverem alugma dúvida pode mandar perguntas pra min, para também estar tirando dúvidas de outras pessoas e enriquecendo este post de informção. Falou galera! Até Mais!

[Gabriel Heming 766]

Desculpe não poder responder todas as suas dúvidas agora, assim que eu tiver tempo escrevo tudo. Mas responderei algumas coisas já.

 

Os serviços de e-mail, normalmente, usufruem de dados em Sessão (SESSION). Quando você clica em sair, o sistema apaga os seus dados na sessão, e quando tentar acessar novamente a página, ele testa se os seus dados estão salvos na sessão. Caso não estiverem mais salvos, ele solicita o login novamente. Isso é um procedimento "padrão" em sistemas de login.

 

Sobre essa frase (vou incluir uma palavra, em negrito):

"Só lembrando que, clicar no botão voltar (evento history.go(-1)) é diferente de acessar diretamente a página anterior. O voltar somente exibe uma página previamente carregada."

te darei um exemplo prático.

 

Imagine que você está caminhando na rua e vê uma casa bonita, que te agrada. Tens uma câmera fotográfica em mãos, e fotografa a casa. Agora você possui o registro dessa casa, em uma fotografia.

 

Imagine que no dia seguinte, você quer ver a casa novamente, mas sabe que não passará em frente dela. Você se lembra que possui uma fotografia dela e, assim, visualiza novamente a mesma casa. Só que, ela está exatamente como você a viu no dia anterior (dia em que tirou a fotografia) e não como ela pode, ou não, estar hoje.

 

Essa é uma história bem supérflua, mas que define, mais ou menos, o que o navegador faz ao clicar no botão voltar. Tirando alguns elementos/códigos da página, o navegador não precisa executar novamente. Ele(o navegador) somente necessita mostrar a "prévia" que obteve no último acesso. Por isso, alguns códigos(depende da situação) não são executados, pois eles já foram executados e, teoricamente, não são necessários para visualizar algo que já foi carregado.

[mangakah 217]

Pois é.... é o drama do desenvolvimento front-end, o que funciona em um navegador poderá não funcionar em outro, o que funcionava nos navegadores antigos pode não mais funcionar nos navegadores de hoje.

 

Então vou lhe passar mais duas variações daquele mesmo código para que você teste aí:

 

(Desta vez o comando de limpeza é executado assim que o documento for carregado)

<body onload=document.forms["form_bairro"].reset();>

 

<body onload=document.form_bairro.reset();>

 

Observe que você deve colocar na sua tag <body>.

 

Para mostrar uma mensagem, por exemplo, quando javascript estiver desabilitado no navegador, você pode...:

 

Usar a tag <noscript>:

<noscript>Por favor, habilite o javascript em seu navegador.</noscript>

 

Ou, simplesmente colocar a mensagem dentro de um elemento HTML e usar javascript para escondê-la. Se javascript estiver habilitado, a mensagem será escondida, caso contrário, continuará sendo exibida.

<div id="msg-no-js">
Por favor, habilite o javascript em seu navegador.
</div>
<script type="text/javascript">
document.getElementById("msg-no-js").style.display = "none";
</script>