2010-08-08 7 views
16

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 BeispielVerwenden von jQuery zum Speichern des Status eines komplizierten Formulars

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

Antwort

0

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); 
+0

Danke für den Vorschlag. Wie ich in meiner Frage festgestellt habe, bin ich mir der Serialisierungsmethode jedoch bewusst, die für mich nur ein Teil der Lösung zu sein scheint. Um das Formular wiederherzustellen, muss ich die gespeicherten serialisierten Daten lesen und dann das Formular wieder in den Zustand zurückverwandeln, einschließlich aller benutzerdefinierten Einträge. Das heißt, wenn ein verstecktes Segment eingeblendet wurde, um benutzerdefinierte Werte einzugeben, möchte ich das bringen zurück. Wie gehe ich vor? – punkish

+0

@punkish: Ich kenne keine 'deserialize()' Methode im jQuery Kern. Sie müssen entweder Ihren eigenen Parser selbst programmieren oder nach einem Plugin suchen. – jAndy

+0

@punkish hier ist meine [Formstate-Plugin] (http://jsfiddle.net/mindplay/yLPY3/) - eine Alternative zu serialize() und die fehlende unserialize(), die mit Objekten statt Strings arbeitet; Ich wollte ein leichtgewichtiges Plugin, das nur mit form-state arbeitet, nicht mit String-Darstellungen oder Speichermethoden. Es handhabt Funkgeräte, Checkboxen usw. auf eine sinnvolle Art und Weise. –

0

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.

18

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")); 
+4

Das ist so nützlich! Nur eine Anmerkung für diejenigen, die nicht wissen, wie man die Funktion aufruft, ich habe es so verwendet: 'sessionStorage.setItem (" formdata ", formToString (jQuery (" # form ")));', und dann dies zu nennen it: 'var storedform = sessionStorage.getItem (" Formulardaten "); stringToForm (storedform, jQuery ("# ​​form")); ' –

+0

Ist der' $ j (this) 'Ausdruck ein Tippfehler? Ich erhalte JavaScript-Fehler, wenn ich dieses Skript verwende, und nehme an, es sollte '$ (this)' sein, richtig? – Matt

+0

Es war kein Tippfehler, aber ich habe es aus der Antwort entfernt, da nur '$' der Standardzugriff auf jquery ist. Siehe https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/ für weitere Informationen – rwilson04

1

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.