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

Question

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

<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. Вот моя задача. Я хочу, чтобы пользователь мог сохранить состояние формы. Таким образом, как только пользователь заполнил всю форму, выбрав средние значения по умолчанию для некоторых сегментов и введя пользовательские значения для других, пользователь может нажать кнопку и сохранить все состояние для размораживания позже. Я думаю, что если я смогу сохранить состояние в объекте, который можно сериализовать, я смогу сохранить его в таблице базы данных или в другом постоянном хранилище.

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

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

Answer 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"));

Answer 2

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

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

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

Answer 3

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

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

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

ОБНОВЛЕНИЕ:

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

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

Answer 4

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

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

alert(form1data);