Borrar todos los campos en un formulario al volver atrás con el botón Atrás del navegador

Question

Necesito una forma de borrar todos los campos dentro de un formulario cuando un usuario usa el botón Atrás del navegador. En este momento, el navegador recuerda todos los últimos valores y los muestra cuando regresa.

Más aclaraciones sobre por qué necesito esta Tengo un campo de entrada de personas con discapacidad cuyo valor es auto-generada utilizando un algoritmo para que sea único dentro de un cierto grupo de datos. Una vez que haya enviado el formulario y se hayan ingresado los datos en la base de datos, el usuario no podrá volver a utilizar el mismo valor para enviar el mismo formulario. Por lo tanto, he desactivado el campo de entrada en primer lugar. Pero si el usuario utiliza el botón Atrás del navegador, el navegador recuerda el último valor y el mismo valor se conserva en el campo de entrada. Por lo tanto, el usuario puede enviar el formulario con el mismo valor nuevamente.

Lo que no entiendo es lo que sucede exactamente cuando presiona el botón de retroceso del navegador. Parece que la página completa se recupera de la caché sin contactar al servidor si el tamaño de la página está dentro del límite de caché del navegador. ¿Cómo me aseguro de que la página se carga desde el servidor independientemente de la configuración del navegador cuando presiona el botón Atrás del navegador?

Answer 1

Los navegadores modernos implementan algo conocido como caché de memoria (BFCache). Cuando presiona el botón retroceder/avanzar, la página actual no se vuelve a cargar (y los scripts nunca se vuelven a ejecutar).

Si tiene que hacer algo en caso de que el usuario presione las teclas atrás/adelante, escuche los eventos BFCache y pagehide.

un pseudo ejemplo jQuery:

$(window).bind("pageshow", function() { 
    // update hidden input field 
}); 

Ver más detalles para Gecko y WebKit implementaciones.

Answer 2

A continuación enlaces pueden ayudarle ..

Browser back button restores empty fields, Clear Form on Back Button?

espero que esto ayude ... Mejor suerte

Answer 3

me encontré con este post, mientras que la búsqueda de una manera de limpiar todo el formulario relacionado con BFCache (caché de botón hacia adelante/atrás) en Chrome.

Además de lo que Sim proporcionó, mi caso de uso requería que los detalles se combinaran con Clear Form on Back Button?.

He encontrado que la mejor manera de hacerlo es en permitir que la forma de comportarse como se espera, y para desencadenar un evento:

$(window).bind("pageshow", function() { 
    var form = $('form'); 
    // let the browser natively reset defaults 
    form[0].reset(); 
}); 

Si no está manejando los input eventos para generar un objeto en JavaScript, o algo más para ese asunto, entonces has terminado. Sin embargo, si está escuchando a los acontecimientos, a continuación, al menos en Chrome que necesita para desencadenar un evento change a sí mismo (o cualquier evento que se preocupan de manejar, incluyendo uno personalizado):

form.find(':input').not(':button,:submit,:reset,:hidden').trigger('change'); 

que debe añadirse después de el reset para hacer cualquier bien.

Answer 4

Esto es lo que funcionó para mí.

<script> 
$(window).bind("pageshow", function() { 
    $("#id").val(''); 
    $("#another_id").val(''); 
}); 
</script> 

inicialmente tenían esto en el $ (document) sección ready de mi jQuery, que también trabajó. Sin embargo, escuché que no todos los navegadores disparan $ (documento). Listo al presionar el botón Atrás, así que lo saqué. No conozco los pros y los contras de este enfoque, pero lo he probado en múltiples navegadores en múltiples dispositivos, y no se encontraron problemas con esta solución.

Answer 5

Si necesita compatibilidad con navegadores más antiguos, "pageshow" opción podría no funcionar. El siguiente código funcionó para mí.

$(window).load(function() { 
    $('form').get(0).reset(); //clear form data on page load 
}); 

Answer 6

Otra forma sin JavaScript es utilizar <form autocomplete="off"> para evitar que el navegador vuelva a llenar el formulario con los últimos valores.

Ver también this question

Probado esto sólo con un único <input type="text"> dentro de la forma, pero funciona bien en la corriente de Chrome y Firefox, por desgracia no en IE10.