Estoy usando multiform para el proyecto de encuesta. Estoy usando conjuntos de campos en el formulario para mostrar un solo formulario cada vez. mi problema es que todo funciona bien, pero cuando el usuario actualiza la página, lo lleva al primer formulario, lo cual es incorrecto, debería mantener al usuario en el formulario actual. No pude encontrar la mejor solución, pero el código que estoy usando está aquí.
$(document).ready(function() { var current = 1, steps = $("fieldset").length; $(".next").click(function() { var form = $("#workbook_form"); form.validate(); if (form.valid() == true) { // $('.timer').countimer('start'); current_step = $(this).parent(); next_step = $(this).parent().next(); next_step.show(); current_step.hide(); setProgressBar(++current); } }); $(".previous").click(function() { current_step = $(this).parent(); next_step = $(this).parent().prev(); next_step.show(); current_step.hide(); setProgressBar(--current); }) setProgressBar(current); // Change progress bar action function setProgressBar(curStep) { var percent = parseFloat(100 / steps) * curStep; percent = percent.toFixed(); $(".progress-bar") .css("width", percent + "%"); $(".percent").html(percent + "%"); } }); #workbook_form fieldset:not(:first-of-type) { display: none; } <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="workbook_form" name="workbook_form" method="post"> <fieldset> <input type="button" class="btn btn-primary btn-sm mt-3 mr-2 float-end next " value="Next" /> </fieldset> </form>El problema es que no está guardando el estado actual del formulario. Cierto, lo ha asignado a una variable, pero la variable también se reasigna si el usuario actualiza el sitio web.
Aquí, un enfoque bastante simple para guardar el estado del usuario
const useState = (stateId) => { const setState = (newState) => localStorage.setItem('state_' + stateId, newState); const getState = () => localStorage.getItem('state_' + stateId) return [getState, setState]; }Aquí está tu código
$(document).ready(function () { const [state, setState] = useState(1); if (state() == null) { setState(1); } steps = $("fieldset").length; $(".next").click(function () { var form = $("#workbook_form"); form.validate(); if (form.valid() == true) { // $('.timer').countimer('start'); current_step = $(this).parent(); next_step = $(this).parent().next(); next_step.show(); current_step.hide(); setProgressBar(setState(state() ++)); } }); $(".previous").click(function () { current_step = $(this).parent(); next_step = $(this).parent().prev(); next_step.show(); current_step.hide(); setProgressBar(setState(state() --); }) setProgressBar(state()); // Change progress bar action function setProgressBar(curStep) { var percent = parseFloat(100 / steps) * curStep; percent = percent.toFixed(); $(".progress-bar").css("width", percent + "%"); $(".percent").html(percent + "%"); } });Entonces, a continuación, he creado un ejemplo para simplemente navegar entre grupos de conjuntos de fieldset y restaurar el grupo actual al recargar. Sin embargo, hay una serie de cosas a tener en cuenta:
fieldset individual.Para esto, he creado un complemento personalizado que maneja la visualización/ocultación de conjuntos de campos y puede activarse al cargar o al hacer clic con lo siguiente. Tomé este enfoque ya que el complemento principal puede ser algo extensible para permitir la adición de validación de campo y almacenamiento de valor.
Eventos activables
// Go to next fieldset (if has one) $form.trigger( 'next' ); // Go to previous fieldset (if has one) $form.trigger( 'prev' ); // Go to specific fieldset const fieldsetIndex = 4; $form.trigger( 'goto', [ fieldsetIndex ] );Eventos adjuntables
El complemento también activa un evento una vez que el conjunto de campos ha cambiado, que podemos utilizar para almacenar el índice del conjunto de campos actual...
$form.on( 'went', function( event, data ) { sessionStorage.setItem( 'fieldsetIndex', data.current ); } ); El objeto de data pasado en el evento went anterior incluye lo siguiente:
/** * @var {Number} current The current fieldset index. * @var {Number} minIndex The minimum fieldset index. * @var {Number} maxIndex The maximum fieldset index. * @var {Number} percent The current fieldset percentage. * @var {jQuery} $target The current fieldset jQuery object. * @var {jQuery} $others All the other (non-active) fieldset jQuery objects. */código y ejemplo
El código y el ejemplo de trabajo se pueden encontrar aquí: https://jsfiddle.net/thelevicole/qm7w51h4/
También puede ver una grabación de pantalla del ejemplo anterior aquí: https://www.youtube.com/watch?v=-gdIggGnZ2M