Botón Volver Handle una forma dinámica

https://stackoverflow.com/questions/1724739

19-09-2019
|

Pregunta

Tengo una forma con una serie de campos de texto. El usuario (a través de javascript) puede añadir un número arbitrario de campos de texto para el formulario. Después de enviar el formulario y pulsando el botón de nuevo solamente se muestra el formulario con los campos que estaban en la forma original cuando se hizo primero (cualquier campos de texto agregados son perdidos). ¿Cuál es la mejor manera de permitir que el botón Atrás para reproducir el formulario en el estado cuando el usuario lo presentó? Cualquier ideas son bienvenidas, algunas cosas que he probado son:

Poner los datos del formulario en una cookie (esto no funciona genial para una pareja razones, pero la principal causa de muerte para mí es que las cookies se limitan a 4K en tamaño)
Poner los datos del formulario en una sesión
Envíe el formulario a través de AJAX y luego administrar el historial

Gracias por la ayuda. He publicado un formulario de prueba en mi sitio web en http://fishtale.org/formtest/f1.php . También aquí es una forma sencilla que exhibe el comportamiento que he mencionado:

<form action="f2.php" method="post">
<input type="text" name="text[]" id="text1"/>
<input type="submit" name="saveaction" value="submit form" />
</form>

<a href="f2.php" id="add_element">Add Form Element</a>

<script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" ></script>

<script type="text/javascript" >
    $('#add_element').click(function (event) {
        event.preventDefault();
        $('#text1').after('<input type="text" name="text[]" />');
    });
</script>

Esto es similar a una pregunta que he publicado hace un tiempo, mejor manera para el botón trasero que se vaya formulario de datos , sin embargo, los elementos de esta forma son modificados por el usuario.

Solución

No puedo encontrar una biblioteca escrito previamente para esto, pero estoy seguro de su sido resuelto antes. Si tuviera que yo mismo me gustaría tener este enfoque:

Utilice la patrón de comando de manera que cada método que modifica la interfaz de usuario de la página añadiendo controles también invoca un método AJAX para empujar el método invocado (textual Javascript representación) en una cola almacenada en la sesión del servidor.
Una vez finalizada body onLoad, utilizar un método AJAX para consultar la sesión del servidor para una cola de comandos para la página que el usuario está conectado. Si uno se recupera, simplemente eval cada miembro de la cola para la reconstrucción de la página de interfaz de usuario en el mismo orden que el usuario lo hizo.

Tenga en cuenta con este enfoque está grabando no sólo adiciones de los controles, pero el traslado así. Va a exigir a los titulares de estado separadas para los controles de entrada de usuario, como cuadros de texto (que también es probable que necesite sesión del servidor con AJAX acceso método).

Otros consejos

¿Qué hay de la creación de un <input type="hidden"> (sin name o fuera de forma por lo que no está sometido) en la que se almacena una lista codificada de campos adicionales para añadir y sus valores? Mientras que el navegador no recordará campos agregados recientemente en ‘atrás’, que recordar los valores de los campos ocultos que estaban en la forma desde el principio.

Aquí hay un ejemplo que guarda los campos adicionales sobre el documento de descarga y los recupera en la lista:

<input type="hidden" id="remembertexts" />

<form action="http://www.google.com/" method="get">
    <div id="texts">
        <input type="text" name="text[]" value="" />
    </div>
    <div>
        <input type="submit" />
        <input type="button" id="addtext" value="+" />
    </div>
</form>

<script type="text/javascript">

    // Add new field on button press
    //
    $('#addtext').click(function() {
        addInput('');
    });

    function addInput(text) {
        $('#texts input').eq(0).clone().val(text).appendTo('#texts');
    };

    // Store dynamic values in hidden field on leaving
    //
    $(window).bind('beforeunload', function() {
        var vals= [];
        $('#texts input').each(function() {
            vals.push(encodeURIComponent(this.value));
        });
        $('#remembertexts').val(vals.join(';'));
    });

    // Retrieve dynamic values on returning to page
    //
    $(function() {
        var extratexts= $('#remembertexts').val().split(';').slice(1);
        $.each(extratexts, function() {
            addInput(decodeURIComponent(this));
        });
    });
</script>

Notas:

Se puede utilizar en lugar de form.onsubmit window.onbeforeunload si solamente se necesita recordar los valores a través de una presentación. onunload no funciona, ya que algunos navegadores ya se han almacenado los viejos valores del formulario antes de que ocurra el evento.
En Firefox la posición de la entrada oculta es importante. Por alguna razón, si lo pones debajo de los campos agregados dinámicamente, Firefox se confunde acerca de qué entrada es y no puede recordar el valor.
Este ejemplo no funciona en Opera. Puede ser hecho para trabajar en la ópera, pero es un dolor. el llamado de la ópera de la carga y descarga de eventos es incompatible por lo que tiene que utilizar onsubmit lugar, o establecer el campo oculto en un intervalo de sondeo, o algo así. Peor aún, cuando los valores Opera recuerda la forma de campo anteriores, que en realidad no se llena hasta en después onload ha disparado! Esto ya hace muchos, muchos problemas forma de script. Puede evitar que al poner un pequeño tiempo de espera en el proceso de carga a esperar hasta que los valores del formulario han ido en si necesita compatibilidad con Opera.

En los buenos navegadores se puede tener funcionando perfectamente, simplemente por no romperlo .

Firefox 1.5 utiliza el almacenamiento en caché en memoria para páginas web completos, incluyendo sus estados de JavaScript, para una sola sesión del navegador. Yendo hacia atrás y hacia adelante entre las páginas visitadas no requiere carga de las páginas y los estados de JavaScript se conservan. fuente

Esto se apoya en Opera y WebKit también. Sin embargo caché DOM sólo es posible en que se adhieren a las reglas:

No utilice onunload, onbeforeunload.
No utilice Cache-control: no-store o must-revalidate.
En PHP debe cambiar session.cache_limiter de patently_ridiculous (creo que lo deletrean nocache) a none.
```
session_cache_limiter('none');
```
Lamentablemente HTTPS también está fuera.

Si no forzar los navegadores para recargar la página, no lo harán. Van a mantener el DOM y sus valores sin cambios, tal y como RFC 2616 sugiere .

Sin embargo , si usted está buscando un lugar para guardar los datos, no hay truco remate - window.name puede almacenar megabytes de datos . No es enviado al servidor y no se comparte entre las ventanas.

También hay cookies de Flash y HTML 5 localStorage se implementa en IE8 y Safari 4.

Paso 2:. El script que procesa el formulario pone los valores introducidos en una matriz y tiendas de esa matriz en una variable de sesión (o texto / db / lo que sea que creas apropiado)

Paso 1: La secuencia de comandos que emite la forma agrega un javascript (que a su vez rellena el formulario), si se encuentra que variable de sesión (y también se borra la variable de sesión)

Usted puede hacer su propio botón de retroceso en la parte superior de la página web y hacerlo más grande y más bonito que el navegador web estándar botón de retroceso.

Bajo el capó su código podía saber cuál era el estado anterior y volver a ella o si no había estado anterior que tal vez puede llamar a la función de retroceso del navegador?

Bloquear el uso del botón de retroceso. Cuando se pulsa el botón de retroceso, reRender la página anterior para el usuario con los nuevos campos incluidos, ya sea de forma visible si eso tiene sentido, o se ocultan. De esta manera el usuario es capaz de utilizar el botón de la manera normal y usted tiene control total sobre la apariencia de la página '' anterior ''.

En el caso de uso específico, sólo tiene que representar la página con todos los campos visibles y rellenado con los valores que se presentaron.

Este es un buen patrón a seguir para cualquier tipo asistente de proceso donde se proporciona una secuencia de formas para que el usuario rellene y se puede optar por ir de nuevo a una forma anterior.

Para dejar perfectamente claro, estoy sugiriendo que utilice este consejo en capturar el evento onUnload para activar el envío de formularios (para que usted obtenga los valores introducidos) y para reRender la página anterior que "volver" habría mostrado (sin los valores). La única alternativa es utilizar Ajax para enviar los valores introducidos cada vez que el usuario deja un campo, y luego tener cada cheque página con el servidor a través de AJAX para recuperar valores adicionales para mostrar.

Aquí están algunas páginas adicionales que discuten que toman el control de la función del botón de atrás y utilizando el evento de descarga para persistir datos de formularios:

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow