form - serializearray jquery php

jQuery plugin para serializar un formulario y también restaurar/poblar el formulario?

Question

¿Existe un complemento jQuery que pueda serializar un formulario y luego restaurar / completar el formulario dado el valor serializado? Sé que el complemento de formulario puede serializar como una cadena de consulta, pero no he encontrado nada que restablezca el formulario de la cadena de consulta.

Lo que me gustaría hacer es serializar los valores del formulario, almacenar como una cookie cada vez que el formulario cambie, y luego restaurar el formulario de la cookie (si existe) cuando la página se carga por primera vez.

He encontrado piezas de este rompecabezas (complemento de formulario, complemento de cookies, varios complementos de autoguardado que no se restauran), pero antes de improvisar algo de varias partes, quería asegurarme de que no había una buena solución enlatada en espera. para mí afuera.

¡Gracias!

Jim

Answer 1

¡Gracias a Barnabas Kendall por la función inicial y a Eggert Jóhannesson por la solución de botón de radio!

Me encontré con un problema con las casillas de verificación; si no están marcadas, no se colocarán en la matriz, hasta ahora todo va bien. Pero como el estado de las casillas de verificación no está almacenado cuando no están marcadas, no pude restaurar este estado si el usuario las había revisado durante la edición del formulario.

Así que extendí la funcionalidad de restauración para desmarcar todas las casillas de verificación que no están en la matriz de datos, esto garantizará que el estado de las casillas de verificación se restaure correctamente, sin importar lo que haya cambiado en el formulario antes de ejecutar la restauración:

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

Función completa:

$.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);
    }
};

Answer 2

Aquí hay algo que rodé basado en el trabajo de otros, específicamente 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);
    }
};

Answer 3

En caso de que necesite manejar este caso: <input name="this[is][my][input][]" /> - y usted, el tipo codicioso, necesita analizar toda la matriz:

Para poblar:

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

Para recuperar valores:

Use $(''form'').serialize() y pase los resultados a esta función:

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

Answer 4

He ampliado la respuesta de Barnabas con lo siguiente:

1. Admite múltiples entradas con el mismo nombre (las casillas de verificación suelen hacer esto).

2. Selectores de caché cuando sea posible, elimine el uso innecesario de $

       /* 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;
           }
       };

Answer 5

Mira mi plugin jQuery Populate:

http://www.keyframesandcode.com/code/development/javascript/jquery-populate-plugin/

Rellena todos los elementos de formulario, así como las etiquetas y cualquier elemento HTML contenido.

Answer 6

Muchas gracias a Barnabas Kendall por su respuesta, muy útil.

Sin embargo, encontré 1 error en relación con la restauración de los botones de radio, donde en lugar de seleccionar el correcto, simplemente copió el valor guardado en todos los botones del grupo.

Afortunadamente es fácil de arreglar. Simplemente reemplace

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

Con

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

y actualizará correctamente los botones de radio

Answer 7

Para serializar en una cadena: var s = $(''form'').first().serialize();

Para restaurar en función de esa cadena: $(''form'').first().deserialize(s);

Por supuesto, necesitarás un plugin derserialize como el que originalmente publiqué aquí .

$.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;
}

Más información: https://.com/a/24441276/1766230

Aquí hay un jsfiddle que te permite jugar con valores de configuración, borrar, restablecer y "deserializar": http://jsfiddle.net/luken/4VVs3/

Answer 8

• Admite múltiples entradas con el mismo nombre (las casillas de verificación suelen hacer esto).
• Selectores de caché cuando sea posible
• Devuelve valores para todas las entradas, si la checkbox o la radio no están configuradas, el valor es null

• Desactiva checkbox o radio si el valor es 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>