¿Cómo se puede conservar el contenido del formulario web para el botón Atrás?

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

Pregunta

Cuando se envía un formulario web y lleva al usuario a otra página, a menudo es el caso que el usuario haga clic en el botón Atrás para enviar el formulario nuevamente (el formulario es una búsqueda avanzada en mi caso).

¿Cómo puedo preservar de manera confiable las opciones de formulario seleccionadas por el usuario cuando hace clic en Atrás (para que no tengan que comenzar desde cero rellenando el formulario nuevamente si solo están cambiando uno de los muchos elementos del formulario?)

¿Tengo que seguir la ruta de almacenamiento de las opciones de formulario en los datos de sesión (cookies o del lado del servidor) o hay alguna forma de hacer que el navegador maneje esto por mí?

(El entorno es PHP / JavaScript, y el sitio debe funcionar en IE6 + y Firefox2 +)

¿Fue útil?

Solución

Lo pondría en la sesión.
Va a ser el más confiable e incluso si no van directamente "atrás", aún tendrá sus opciones de búsqueda allí. Ponerlo en la cookie también funcionaría, pero no se recomendaría a menos que sea una forma muy pequeña.

Otros consejos

Creo que estás a merced del navegador. Cuando responde, el navegador no realiza una nueva solicitud de contenido al servidor, sino que utiliza el caché (de todos modos, en casi todos los navegadores que he visto). Así que cualquier cosa del lado del servidor está fuera.

Me pregunto si podría hacer algo muy complicado como almacenar el resultado de búsqueda en una cookie durante el evento de descarga de la página de resultados, y luego leer la cookie en javascript en la página de búsqueda y completar el formulario, pero esto Es solo una especulación, no sé si funcionaría.

Depende del navegador, pero en la mayoría de los casos no tiene que hacer nada.

IE, Firefox, etc. recordarán felizmente el contenido del formulario en la página anterior, y lo mostrarán de nuevo cuando se haga clic en Atrás ... siempre que no haga nada para detener el funcionamiento, como hacer que la página no caché o compilando el formulario completamente desde el script.

(Es probable que poner cosas en la sesión confunda los navegadores con dos pestañas abiertas en el mismo formulario. Tenga mucho cuidado al hacer algo así).

El problema que tienes es que el navegador devolverá una versión en caché de la página, y probablemente no volverá a pedirle al servidor, lo que significa que el uso de la sesión sería irrelevante.

Sin embargo, podría usar AJAX para cargar los detalles del formulario enviado anteriormente en el evento de carga de la página.

Básicamente, tendría que almacenarlo en su servidor de alguna manera (probablemente en variables de sesión, como se sugiere) después de la POST. También debe configurar Javascript en la página del formulario para ejecutar en carga para emitir una llamada AJAX para obtener los datos de su servidor (en, por ejemplo, formato JSON) y rellene los campos del formulario con los datos.

Ejemplo de código jQuery: 

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

Su /getformdata.php puede devolver datos como: 

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

y, obviamente, devolvería una matriz vacía si no hubiera nada guardado todavía para la sesión. El código anterior es básico y no ha sido probado, pero eso debería darle una idea básica.

Como nota al margen: las versiones actuales de Opera y Firefox conservarán el contenido del campo de formulario cuando regresen. Su código JS sobrescribirá esto, pero eso debería ser seguro.

Otra opción de ajaxy (por lo que no es bueno para usuarios sin javascript) es enviar el formulario a través de javascript y luego ir a la página de confirmación (o mostrar el mensaje en el formulario al reemplazar el botón con un mensaje). De esa manera no hay " atrás " posible.

¿Por qué no almacenar los valores en una cookie antes de enviarlos? También puede incluir una marca de tiempo o token para indicar cuándo se completó. Luego, cuando se carga la página, puede determinar si debe completar los campos con datos de la cookie, o simplemente dejarlos en blanco porque se trata de una nueva búsqueda.

También puede hacer todo lo local por javascript. Por lo tanto, almacena una cookie con el valor de búsqueda y, en la carga de la página, verifica si existe la cookie. Algo como esto: 

$('#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);
});

No he probado esto pero debería funcionar. Necesitarás jQuery para esto.

Las funciones de las cookies provienen de: http://www.quirksmode.org/js/cookies. html

Debería decir por cierto que tanto FireFox como IE tienen este comportamiento por defecto.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top