Плагин jQuery для сериализации формы, а также восстановления/заполнения формы?

Есть ли там плагин jQuery, который может сериализовать форму, а затем позже восстановить/заполнить форму с учетом сериализованного значения? Я знаю, что плагин формы может сериализоваться как запрос, но я не нашел ничего, что восстановит форму из строки запроса.

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

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

Спасибо!

Джим

Ответы

Ответ 1

Вот немного чего-то, что я прокатил на основе работы других, в частности serializeAnything:

/* jQuery.values: get or set all of the name/value pairs from child input controls   
 * @argument data {array} If included, will populate all child controls.
 * @returns element if data was provided, or array of values if not
*/

$.fn.values = function(data) {
    var els = $(this).find(':input').get();

    if(typeof data != 'object') {
        // return all data
        data = {};

        $.each(els, function() {
            if (this.name && !this.disabled && (this.checked
                            || /select|textarea/i.test(this.nodeName)
                            || /text|hidden|password/i.test(this.type))) {
                data[this.name] = $(this).val();
            }
        });
        return data;
    } else {
        $.each(els, function() {
            if (this.name && data[this.name]) {
                if(this.type == 'checkbox' || this.type == 'radio') {
                    $(this).attr("checked", (data[this.name] == $(this).val()));
                } else {
                    $(this).val(data[this.name]);
                }
            }
        });
        return $(this);
    }
};

Ответ 2

Ive расширилось на Barnabas ответ на следующее:

  • Поддержка нескольких входов с одинаковым именем (обычно это делают флажки).

  • Селекторы кешей, когда это возможно, удалите ненужное использование $

        /* jQuery.values: get or set all of the name/value pairs from child input controls   
     * @argument data {array} If included, will populate all child controls.
     * @returns element if data was provided, or array of values if not
    */

    $.fn.values = function(data) {
        var els = this.find(':input').get();

        if(arguments.length === 0) {
            // return all data
            data = {};

            $.each(els, function() {
                if (this.name && !this.disabled && (this.checked
                                || /select|textarea/i.test(this.nodeName)
                                || /text|hidden|password/i.test(this.type))) {
                    if(data[this.name] == undefined){
                        data[this.name] = [];
                    }
                    data[this.name].push($(this).val());
                }
            });
            return data;
        } else {
            $.each(els, function() {
                if (this.name && data[this.name]) {
                    var names = data[this.name];
                    var $this = $(this);
                    if(Object.prototype.toString.call(names) !== '[object Array]'){
                        names = [names]; //backwards compat to old version of this code
                    }
                    if(this.type == 'checkbox' || this.type == 'radio') { 
                        var val = $this.val();
                        var found = false;
                        for(var i = 0; i < names.length; i++){
                            if(names[i] == val){
                                found = true;
                                break;
                            }
                        }
                        $this.attr("checked", found);
                    } else {
                        $this.val(names[0]);
                    }
                }
            });
            return this;
        }
    };

Ответ 3

Благодаря Barnabas Kendall для начальной функции и Eggert Jóhannesson для исправления радио кнопки!

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

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

if (this.name && data[this.name]) {
   if(this.type == "checkbox" || this.type == "radio") {
       $(this).prop("checked", (data[this.name] == $(this).val()));
   } else {
       $(this).val(data[this.name]);
   }
} else if (this.type == "checkbox") {
   $(this).prop("checked", false);
}

Полная функция:

$.fn.values = function(data) {
   var inps = $(this).find(":input").get();

    if(typeof data != "object") {
       // return all data
        data = {};

        $.each(inps, function() {
            if (this.name && (this.checked
                        || /select|textarea/i.test(this.nodeName)
                        || /text|hidden|password/i.test(this.type))) {
                data[this.name] = $(this).val();
            }
        });
        return data;
    } else {
        $.each(inps, function() {
            if (this.name && data[this.name]) {
                if(this.type == "checkbox" || this.type == "radio") {
                    $(this).prop("checked", (data[this.name] == $(this).val()));
                } else {
                    $(this).val(data[this.name]);
                }
            } else if (this.type == "checkbox") {
                $(this).prop("checked", false);
            }
       });
       return $(this);
    }
};

Ответ 4

Большое спасибо Барнабасу Кендалу за его ответ, очень полезный.

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

К счастью, это легко исправить. Просто замените

if(this.type == 'checkbox') {

С

if(this.type == 'checkbox' || this.type == 'radio') {

и он будет правильно обновлять радиокнопки

Ответ 5

  • Поддержка нескольких входов с одинаковым именем (обычно это делают флажки).
  • Селектор кэшей, если возможно
  • Возвращаемые значения для всех входов, если checkbox или radio не установлены, значение null

  • Деактивирует checkbox или radio, если значение null

    $.fn.formData = function(values) {
  var form = $(this);
  var inputs = $(':input', form).get();
  var hasNewValues = typeof values == 'object';

  if (hasNewValues) {
    $.each(inputs, function() {
      var input = $(this);
      var value = values[this.name];

      if (values.hasOwnProperty(this.name)) {
        switch (this.type) {
          case 'checkbox':
            input.prop('checked', value !== null && value);
            break;
          case 'radio':
            if (value === null) {
              input.prop('checked', false);
            } else if (input.val() == value) {
              input.prop("checked", true);
            }
            break;
          default:
            input.val(value);
        }
      }
    });
    return form;
  } else {
    values = {};
    $.each(inputs, function() {
      var input = $(this);
      var value;
      switch (this.type) {
        case 'checkbox':
        case 'radio':
          value = input.is(':checked') ? input.val() : null;
          break;
        default:
          value = $(this).val();
      }
      values[this.name] = value;
    });
    return values;
  }
};
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Ответ 7

Если вам нужно обработать этот случай: <input name="this[is][my][input][]" /> - и вы, жадный парень, нуждаетесь в анализе всей матрицы:

Чтобы заполнить:

http://www.keyframesandcode.com/resources/javascript/jQuery/demos/populate-demo.html

Чтобы получить значения:

Используйте $('form').serialize() и передайте результаты этой функции:

http://phpjs.org/functions/parse_str/

Ответ 8

В сериализуем в строку: var s = $('form').first().serialize();

В восстановить на основе этой строки: $('form').first().deserialize(s);

Конечно, вам понадобится плагин derserialize, такой как тот, который я изначально размещен здесь.

$.fn.deserialize = function (serializedString) 
{
    var $form = $(this);
    $form[0].reset();
    serializedString = serializedString.replace(/\+/g, '%20');
    var formFieldArray = serializedString.split("&");

    // Loop over all name-value pairs
    $.each(formFieldArray, function(i, pair){
        var nameValue = pair.split("=");
        var name = decodeURIComponent(nameValue[0]);
        var value = decodeURIComponent(nameValue[1]);
        // Find one or more fields
        var $field = $form.find('[name=' + name + ']');

        // Checkboxes and Radio types need to be handled differently
        if ($field[0].type == "radio" || $field[0].type == "checkbox") 
        {
            var $fieldWithValue = $field.filter('[value="' + value + '"]');
            var isFound = ($fieldWithValue.length > 0);
            // Special case if the value is not defined; value will be "on"
            if (!isFound && value == "on") {
                $field.first().prop("checked", true);
            } else {
                $fieldWithValue.prop("checked", isFound);
            } 
        } else { // input, textarea
            $field.val(value);
        }
    });
    return this;
}

Дополнительная информация: fooobar.com/info/177980/...

Здесь jsfiddle, который позволяет вам играть с настройкой значений, очисткой, сбросом и "десериализацией": http://jsfiddle.net/luken/4VVs3/