Verwenden von jQuery zum Speichern des Status eines komplizierten Formulars

Question

Ich habe ein ziemlich kompliziertes Formular mit vielen "Schritten" darin, die vom Benutzer ausgefüllt werden. Einige Schritte (man denke an sie als Form Segmente) Standardoptionen, aber auf Klick auf „benutzerdefinierte Werte eingeben,“ sie zu dieser Verordnung versteckte Reihe von Feldern angezeigt, die der Benutzer Informationen in eingeben. Hier ist ein Beispiel

<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> 

Es gibt mehrere solcher Segmente, z. B. # s1 .. # s7. Hier ist meine Aufgabe. Ich möchte dem Benutzer ermöglichen, den Status eines Formulars zu speichern. Nachdem ein Benutzer das gesamte Formular ausgefüllt, die Standardwerte für einige Segmente ausgewählt und benutzerdefinierte Werte für andere Segmente eingegeben hat, kann der Benutzer auf eine Schaltfläche klicken und den gesamten Status zum späteren Auftauen speichern. Ich denke, wenn ich den Zustand in einem Objekt speichern kann, das ich serialisieren kann, kann ich es in einer DB-Tabelle oder einem anderen dauerhaften Speicher speichern.

Der Benutzer kann zu einem späteren Zeitpunkt zurückkehren und die gesamte vorherige Sitzung neu aufbauen.

Wie mache ich das? Es gibt das getAttributes Plugin http://plugins.jquery.com/project/getAttributes, und da ist die jQuery serialize Methode, aber ich kann nicht für das Leben von mir anfangen. Bitte stoße mich in die richtige Richtung.

Answer 1

Ich denke, Sie suchen nach .serialize(), die form data serialisiert. Um dies zu tun, müssen Ihre input Elemente in einem form tag plus sein, alle von ihnen müssen name Attribute haben.

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

alert(form1data); 

Answer 2

Möglicherweise möchten Sie nur die Daten setzen, die in eine json Nicht-Standard ist, ist es dann an den Server durch eine post-Anfrage senden gespeichert werden.

So, sobald die Person zurück auf die Seite geht, sehen Sie automatisch, ob sie etwas gespeichert haben, und Sie können entweder fragen, ob sie es verwenden möchten oder füllen Sie das Formular aus den gespeicherten Daten.

Das Speichern von Standardwerten ist eine Verschwendung von Bandbreite, da Sie sie nicht von der Form des Formulars ändern, wenn es tatsächlich geladen wurde.

UPDATE:

Um es als JSON zu speichern ich denke, es einfach genug sein würde, nur um es in eine lange Kette aufzubauen, da das Format einfach ist, so dass Sie nur alles als eine Zeichenkette senden .

Sie können auch die Bühne speichern, auf der sie sind, oder automatisch speichern, wenn sie zu jeder Stufe gehen, was eine bessere Option sein kann, falls ihr Computer abstürzt, müssen sie nicht am Anfang neu beginnen , aber Sie können möchten, dass das Kontrollkästchen aktiviert ist, um die automatische Speicherung zu aktivieren.

Answer 3

Hier sind ein paar Funktionen, um mit diesem Prozess zu helfen. formToString serialisiert eine Form als String und stringToForm macht genau das Gegenteil:

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]); 
      } 
     } 
    }); 
} 

Verbrauch:

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

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

Answer 4

ich mithilfe des dumbFormState jQuery plugin beginnen würde.

Dieses Plugin speichert tatsächlich automatisch Dinge, während Sie tippen etc., so wenn sie zurückkommen, ist es bereits wieder ausgefüllt und Sie brauchen keine Server-Seite, um es zu tun.

Danach würde ich weitere jQuery nach dem dumbFormState-Plugin laden, um dann die Bereiche, die ausgefüllt sind, anzuzeigen/auszublenden. Es ist kein Problem, wenn Sie dies aufrufen, bevor jemand Ihr Formular ausgefüllt hat, weil es leer ist und Ihre Logik keine Dinge zeigen/verbergen sollte, die sowieso leer sind.