Uso de jQuery para almacenar el estado de un formulario complicado

Question

Tengo una forma bastante complicada con muchos "pasos" que el usuario completa. Algunos pasos (pensar en ellos como segmentos de formulario) tiene opciones por defecto, pero al hacer clic en un "introducir valores personalizados", que muestran un conjunto presente oculto de campos que el usuario puede introducir información en. Aquí está un ejemplo

<div id="#s1_normal"> 
<input type="radio" name="mode" value="a"> Mode A 
<input type="radio" name="mode" value="b"> Mode B 
Choose one of the above for applying average coefficient 
values of "a" or "b" to 100% of your product or 
<a href="#" onclick="toggleCustom('s1');">enter custom values</a> 
</div> 

<div id="#s1_custom"> 
%a: <input type="text" name="perc_a"> coeff. a <input type="text" name="coeff_a"> 
%b: <input type="text" name="perc_b"> coeff. b <input type="text" name="coeff_b"> 
Enter custom values above or 
<a href="#" onclick="toggleCustom('s1');">choose average values</a> 

Existen varios segmentos de este tipo, por ejemplo, # s1 .. # s7. Aquí está mi tarea. Quiero permitir al usuario guardar el estado de un formulario. Entonces, una vez que un usuario ha completado todo el formulario, seleccionando los valores predeterminados promedio para algunos segmentos e ingresando valores personalizados para otros, el usuario puede hacer clic en un botón y guardar todo el estado para descongelarlo más tarde. Estoy pensando, si puedo guardar el estado en un objeto que puedo serializar, puedo guardarlo en una tabla db u otro almacenamiento persistente.

El usuario puede volver en otro momento y volver a construir toda la sesión anterior.

¿Cómo puedo hacer esto? Está el plugin getAttributes http://plugins.jquery.com/project/getAttributes, y está el método jQuery serialize, pero no puedo comenzar. Por favor, dame un empujón en la dirección correcta.

Answer 1

Supongo que está buscando .serialize(), que serializa form data. Para hacer eso, sus elementos input deben estar dentro de un form tag plus, todos ellos deben tener atributos name.

var form1data = $('#form1').serialize(); 

alert(form1data); 

Answer 2

Es posible que desee sólo hay que poner los datos que no es el predeterminado en un JSON, a continuación, enviarlo a través de una solicitud POST al servidor para ser salvo.

Por lo tanto, una vez que la persona vuelve a la página automáticamente busca para ver si tienen algo guardado, y puede preguntar si desea utilizarlo o completar el formulario de los datos guardados.

Guardar valores predeterminados es una pérdida de ancho de banda, ya que no lo cambiará de lo que era el formulario cuando se cargó de todos modos.

ACTUALIZACIÓN:

Para guardarlo como JSON Creo que sería bastante fácil de simplemente construir con él una larga cadena ya que el formato es fácil, por lo que sólo mandar todo como una sola cadena .

Es posible que también desee guardar la etapa en la que se encuentra o guardarla automáticamente en cada etapa, lo que puede ser una mejor opción; en caso de que su computadora falle, no tendrá que volver a empezar desde el principio. , pero es posible que desee habilitarlo con una casilla de verificación para activar el guardado automático.

Answer 3

Aquí hay un par de funciones para ayudar con este proceso. formToString serializa una forma como una cadena, y stringToForm hace lo contrario:

function formToString(filledForm) { 
    formObject = new Object 
    filledForm.find("input, select, textarea").each(function() { 
     if (this.id) { 
      elem = $(this); 
      if (elem.attr("type") == 'checkbox' || elem.attr("type") == 'radio') { 
       formObject[this.id] = elem.attr("checked"); 
      } else { 
       formObject[this.id] = elem.val(); 
      } 
     } 
    }); 
    formString = JSON.stringify(formObject); 
    return formString; 
} 
function stringToForm(formString, unfilledForm) { 
    formObject = JSON.parse(formString); 
    unfilledForm.find("input, select, textarea").each(function() { 
     if (this.id) { 
      id = this.id; 
      elem = $(this); 
      if (elem.attr("type") == "checkbox" || elem.attr("type") == "radio") { 
       elem.attr("checked", formObject[id]); 
      } else { 
       elem.val(formObject[id]); 
      } 
     } 
    }); 
} 

Uso:

// Convert form to string 
var formString = formToString($("#myForm")); 
// Save string somewhere, e.g. localStorage 
// ... 

// Restore form from string 
stringToForm(formString, $("#myForm")); 

Answer 4

Me gustaría empezar con la dumbFormState jQuery plugin.

Ese complemento realmente guarda automáticamente las cosas mientras escribe, etc. por lo tanto, cuando vuelven, ya están llenas y no es necesario que lo haga el lado del servidor.

Después de eso, crearía jQuery adicional para cargar después del plugin dumbFormState para luego mostrar u ocultar las áreas que se completan. No hay problema si llama esto antes de que alguien complete su formulario porque estará en blanco y su lógica no debería mostrar u ocultar las cosas que están en blanco de todos modos.