Использование jQuery для хранения состояния сложной формы

У меня довольно сложная форма со многими "шагами" в ней, которые заполняются пользователем. Некоторые шаги (считая их как сегменты формы) имеют параметры по умолчанию, но при нажатии "ввести пользовательские значения" они отображают скрытый набор полей, которые пользователь может ввести в данные. Вот пример

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

Существует несколько таких сегментов, например, # s1.. # s7. Вот моя задача. Я хочу, чтобы пользователь мог сохранить состояние формы. Таким образом, как только пользователь заполнил всю форму, выбирая средние значения по умолчанию для некоторых сегментов и введя пользовательские значения для других, пользователь может нажать кнопку и сохранить все состояние для таяния позже. Я думаю, если я могу сохранить состояние в объекте, который я могу сериализовать, я могу сохранить его в таблице db или в другом постоянном хранилище.

Пользователь может вернуться позже и перестроить весь предыдущий сеанс.

Как мне это сделать? Существует плагин getAttributes http://plugins.jquery.com/project/getAttributes, и есть метод сериализации jQuery, но я не могу на всю жизнь начать. Пожалуйста, подтолкните меня в правильном направлении.

Ответ 1

Вот несколько функций, которые помогут в этом процессе. formToString сериализует форму как строку, а stringToForm выполняет обратное:

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

Использование:

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

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

Ответ 2

Я бы начал с использования плагина dumbFormState jQuery.

Этот плагин фактически автоматически сохраняет вещи во время ввода и т.д., поэтому, когда они возвращаются, он уже заполняется снова, и для этого вам не нужна серверная сторона.

После этого я создам следующий jQuery для загрузки после плагина dumbFormState, чтобы затем отобразить/скрыть заполненные области. Это не проблема, если вы позвоните этому, прежде чем кто-то заполнит их форму, потому что он будет пустым, и ваша логика не должна показывать/скрывать все, что пустое.

Ответ 3

Я думаю, вы ищете . serialize(), который сериализует form data. Для этого элементы input должны быть в пределах form tag плюс, все они должны иметь атрибуты name.

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

alert(form1data);

Ответ 4

Возможно, вы захотите просто поместить данные, которые не являются стандартными, в json, а затем отправить их через почтовый запрос на сервер для сохранения.

Итак, как только человек вернется на страницу, вы автоматически увидите, что у них что-то сохранено, и вы можете либо спросить, хотят ли они его использовать, либо заполнить форму из сохраненных данных.

Сохранение значений по умолчанию - это пустая трата полосы пропускания, так как вы не будете изменять ее, чем была форма, когда она была загружена.

UPDATE:

Чтобы сохранить его как JSON, я думаю, что было бы легко создать его в длинной строке, поскольку формат будет простым, поэтому вы просто отправите все как одну строку.

Вы можете также сохранить сцену, на которой они находятся, или автоматически сохранять, когда они идут на каждый этап, что может быть лучшим вариантом, в случае сбоя компьютера они не должны начинаться с начала, но вы можете захотеть, чтобы это было включено с помощью флажка, чтобы включить автоматическое сохранение.