Używanie jQuery do przechowywania stanu skomplikowanej formy

Question

Mam raczej skomplikowaną formę z wieloma "krokami" w niej wypełnionymi przez użytkownika. Kilka kroków (myśleć o nich jako segmenty formie) mają domyślne opcje, ale na kliknięcie „wprowadzić wartości niestandardowe” wyświetlają się do niego ukryty zbiór pól, które użytkownik może wprowadzić informacje w. Oto przykład

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

Istnieje kilka takich segmentów, na przykład # s1 .. # s7. Oto moje zadanie. Chcę umożliwić użytkownikowi zapisanie stanu formularza. Tak więc, gdy użytkownik wypełni cały formularz, wybierając średnie wartości domyślne dla niektórych segmentów i wprowadzając niestandardowe wartości dla innych, użytkownik może kliknąć przycisk i zachować cały stan do późniejszego rozmrożenia. Myślę, że jeśli mogę zapisać stan w obiekcie, który można serializować, mogę zapisać go w tabeli db lub inne trwałe pamięci.

Użytkownik może wrócić w późniejszym czasie i ponownie skonstruować całą poprzednią sesję.

Jak to zrobić? Istnieje wtyczka getAttributes http://plugins.jquery.com/project/getAttributes i istnieje metoda serializacji jQuery, ale nie mogę rozpocząć mojego życia. Proszę, popchnij mnie we właściwym kierunku.

Answer 1

Domyślam się, że szukasz .serialize(), który serializuje form data. Aby to zrobić, twoje elementy input muszą znajdować się w zakresie form tag plus, wszystkie z nich muszą mieć atrybuty name.

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

alert(form1data); 

Answer 2

może chcesz po prostu umieścić dane, które są non-default w JSON, a następnie wysłać go za pośrednictwem żądania POST do serwera mają być zapisane.

Tak więc, gdy osoba wraca na stronę, automatycznie szuka się, czy coś zostało zapisane, i można zapytać, czy chce jej użyć, czy wypełnić formularz z zapisanych danych.

Zapisywanie wartości domyślnych to marnowanie przepustowości, ponieważ nie zmienisz jej z formularza, który był już załadowany.

UPDATE:

Aby zapisać go jako JSON myślę, że byłoby dość łatwo po prostu zbudować go na długi ciąg, ponieważ format jest łatwe, więc można po prostu wysłać wszystko jako jeden ciąg .

Możesz również zapisać scenę, na której się znajdują, lub, automatycznie, zapisując je na każdym etapie, co może być lepszym rozwiązaniem, w przypadku awarii komputera, nie będą musieli zaczynać od początku. , ale możesz włączyć tę opcję, aby włączyć automatyczne zapisywanie.

Answer 3

Oto kilka funkcji, które mogą pomóc w tym procesie. formToString serializes formę jako ciąg znaków, a stringToForm robi odwrotnie:

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

Zastosowanie:

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

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

Answer 4

Chciałbym uruchomić za pomocą dumbFormState jQuery plugin.

Ta wtyczka faktycznie automatycznie zapisuje rzeczy podczas pisania itp., Więc kiedy wracają, jest już wypełniona i nie potrzebujesz do tego strony po stronie serwera.

Następnie utworzyłbym dalsze jQuery do załadowania po wtyczce dumbFormState, aby następnie pokazać/ukryć obszary, które są wypełnione. Nie ma problemu, jeśli zadzwonisz, zanim ktoś kiedykolwiek wypełni formularz, ponieważ będzie pusty, a twoja logika nie powinna pokazywać/ukrywać rzeczy, które i tak są puste.