Como podemos contentar formulário web ser preservado para o botão Voltar

StackOverflow https://stackoverflow.com/questions/247573

Pergunta

Quando um formulário web é apresentado e leva o usuário para outra página, é muitas vezes o caso de que o usuário clique no botão Voltar, a fim de enviar o formulário novamente (a forma é uma pesquisa avançada no meu caso).

Como posso confiável preservar as opções de formulário selecionados pelo usuário quando eles clique em Back (para que eles não tem que começar do zero com o preenchimento do formulário de novo se eles só estão mudando um dos muitos elementos de formulário?)

Eu tenho que ir abaixo da rota de armazenar as opções de formulário em dados da sessão (cookies ou do lado do servidor) ou há uma maneira de obter o navegador para lidar com isso para mim?

(Ambiente é PHP / JavaScript - eo trabalho local deve no IE6 + e Firefox2 +)

Foi útil?

Solução

Eu colocá-lo na sessão.
Vai ser o mais confiável e até mesmo se eles não vão direto "de volta", ele ainda vai ter as suas opções de pesquisa lá. Colocá-lo no cookie também funcionaria, mas não seria recomendado a menos que seja uma forma muito pequena.

Outras dicas

Eu acredito que você está à mercê do browser. Quando você bater de volta, o navegador não fazer uma nova solicitação para o servidor para o conteúdo, ele usa o cache (em quase todos os navegadores que eu vi qualquer maneira). Então server-side nada está fora.

Eu estou querendo saber se você poderia fazer algo muito complicado como armazenar o resultado da pesquisa em um cookie durante o evento onunload da página de resultados, e depois de ler o cookie em javascript na página de pesquisa e preencher o formulário - mas isso é apenas especulação, eu não sei se ele iria trabalhar.

É até o navegador, mas na maioria dos casos, você não tem que fazer nada.

IE, Firefox, etc. terá todo o prazer lembrar o conteúdo do formulário na página anterior, e mostrá-la novamente quando é clicado ... contanto que você não fazer nada para impedir que o trabalho, tais como a tomada de a página não-cache ou construir a forma inteiramente a partir de script.

(colocando coisas na sessão é provável que os navegadores confunda com duas abas abertas no mesmo formulário. Tenha muito cuidado ao fazer qualquer coisa assim.)

O problema que você tem é que o navegador irá retornar uma versão em cache da página, e provavelmente não pedir ao servidor para ele novamente, ou seja, usando a sessão seria irrelevante.

Você poderia, contudo, usar AJAX para carregar os detalhes do formulário previamente apresentado em evento de carregamento da página.

Você tem basicamente para armazená-lo em seu servidor de alguma forma (provavelmente em variáveis ??de sessão, como sugerido) após o POST. Você também tem que configurar Javascript na página de formulário para executar a carga de emitir uma chamada de AJAX para obter os dados de seu servidor (em, digamos, formato JSON) e preencher previamente os campos do formulário com os dados.

código Exemplo jQuery: 

$( document ).ready( function() {
  $.getJSON(
    "/getformdata.php",
    function( data ) {
      $.each( data.items, function(i,item) {
        $( '#' + item.eid ).val( item.val );
      } );
    });
} );

Seu /getformdata.php pode retornar dados como: 

{
  'items': [
    {
      'eid': 'formfield1',
      'val': 'John',
    },
    {
      'eid': 'formfield2',
      'val': 'Doe',
    }
  ]
}

e seria obviamente retornar um array vazio se não houvesse nada salvo ainda para a sessão. O código acima é áspera e não testado, mas isso deve dar-lhe a idéia básica.

Como uma nota lateral: as versões atuais do Opera e Firefox irá preservar o conteúdo campo de formulário quando voltar. Seu código JS irá substituir este, mas que deve ser seguro.

Outra opção ajax (por isso não é bom para os usuários sem javascript) é para enviar o formulário via javascript e depois ir para a página de confirmação (ou mostrar a mensagem no formulário, substituindo o botão com uma mensagem). Dessa forma, não há "back" possível.

Por que não armazenar os valores em um cookie antes de enviar? Você também pode incluir um timestamp ou símbolo para indicar quando foi preenchido. Então, quando a página é carregada, você pode determinar se você deve preencher os campos com os dados do cookie ou simplesmente deixá-los em branco, porque esta é uma nova pesquisa.

Você também pode fazer tudo o local, javascript. Então você armazenar um cookie com o valor de pesquisa e sobre pageload você verificar se o cookie existe. Algo parecido com isto: 

$('#formSubmitButton').click( function() {
    var value = $('#searchbox').val();
    var days = 1;
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
    document.cookie = "searchbox="+value+expires+"; path=/";
});

$(document).ready( function() {
    var nameEQ = "searchbox=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) var valueC = c.substring(nameEQ.length,c.length);
   }
   $('#searchbox').val(valueC);
});

Você não testei isso, mas é deve funcionar. Você vai precisar jQuery para isso.

funções do bolinho vieram de: http://www.quirksmode.org/js/cookies. html

Eu deveria dizer btw que tanto o Firefox e IE tem este comportamento por padrão.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top