JQuery - я могу заполнить входные данные формы из сериализованной строки формы?

Question

Учитывая, что у меня есть какая-то форма на странице, я знаю, что могу получить сериализованную строку в юникоде, используя

var query = jQuery('#some-form').serialize();

Также возможно установить значение каждого входа с помощью $('#some-input').val(...), Предполагая, что та же самая форма выше была сброшена, но у меня все еще есть строка запроса - есть ли простой способ заполнить форму из этой строки? Я понимаю, что могу разобрать его и настроить каждый вход / выбор индивидуально, но я искал более простое решение. Благодарю.

Answer 1

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

См. Сериализация в JSON в jQuery.

Answer 2

Плагин jquery.deserialize должен помочь вам.

Answer 3

Если ваша форма содержит только текстовые вводы (не как массивы), вы можете попробовать этот плагин, который я адаптировал из его аналога функции unserialize ( https://gist.github.com/rcmachado/242617), но вместо возврата объекта он заполняет форму, к которой относится.

(function($){
    $.fn.fillformwithserialized = function(serializedString) {
        var str = decodeURI(serializedString);
        var pairs = str.split('&');
        var p, idx, val;
        for (var i=0, n=pairs.length; i < n; i++) {
            p = pairs[i].split('=');
            idx = p[0];

            var txtBox = this.find('#' + idx + ':input');
            if (txtBox.is(":text")) {
                txtBox.val(p[1]);
            }
        }

        return this;
    };
})(jQuery);

Пример использования:

var dataSerialised = sessionStorage.getItem('frmVeryImportantStuff');

if (dataSerialised == null || !confirm("We could restore the previous version of the form you posted. Shall we?"))
return false;
else {
    $("#frmVeryImportantStuff").fillformwithserialized(dataSerialised);
}

Очевидно, вам нужно было сохранить вашу форму в sessionStorage в первую очередь. Пример:

sessionStorage.setItem("frmVeryImportantStuff", $(frmVeryImportantStuff).serialize());