Tengo bastante complicada formulario con muchos «pasos» en lo que son rellenados por el usuario. Algunos de los pasos (pensar en ellos como forma de segmentos) tienen opciones por defecto, pero al hacer clic en un «introducir valores personalizados,» muestran un presente ocultos conjunto de campos que el usuario puede introducir información. Aquí es un ejemplo

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

Hay varios de estos segmentos, por ejemplo, #s1 .. #s7. Aquí está mi tarea. Quiero habilitar al usuario guardar el estado de un formulario. Así, una vez que el usuario ha rellenado todo el formulario, elegir el promedio de los valores predeterminados para algunos segmentos, y de entrar en valores personalizados para otros, el usuario es capaz de hacer clic en un botón y tener todo el estado guardado para descongelar más tarde. Estoy pensando, si puedo guardar el estado de un objeto que me puede serializar, puedo guardarlo en una base de datos de la tabla o algún otro almacenamiento persistente.

El usuario puede volver de nuevo en un momento posterior, y re-construir la totalidad de la sesión anterior.

¿Cómo puedo hacer esto? No es la getAttributes plugin http://plugins.jquery.com/project/getAttributes, y no es el jQuery método serialize, pero no puedo por la vida de mí empezar. Por favor empujar a mí en la dirección correcta.

InformationsquelleAutor punkish | 2010-08-08

4 Comentarios

  1. 22

    Aquí hay un par de funciones para ayudar con este proceso. formToString serializa un formulario como una cadena, y stringToForm hace a la inversa:

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

    Uso:

    //Convert form to string
    var formString = formToString($("#myForm"));
    //Save string somewhere, e.g. localStorage
    //...
    
    //Restore form from string
    stringToForm(formString, $("#myForm"));
    • Esto es tan útil! Sólo una nota para aquellos que no saben cómo llamar a la función, la he usado como esto: sessionStorage.setItem("formdata",formToString(jQuery("#form"))); y, a continuación, este llamarlo: var storedform = sessionStorage.getItem("formdata"); stringToForm(storedform,jQuery("#form"));
    • Es el $j(this) expresión de un error tipográfico? Estoy recibiendo errores de JavaScript cuando el uso de este script, y supongo que debe ser $(this), ¿verdad?
    • No fue un error, pero me lo quitaron de la respuesta, ya que $ es la forma por defecto de acceso a jquery. Consulte learn.jquery.com/using-jquery-core/… para más info
    • Se le olvidó textarea
    • añadido textarea, ¿cómo es eso?
    • en stringToForm hacer stringForm.find() y lazo sobre los resultados. dentro del bucle también stringForm.find() en el id del elemento. esto siempre se va a encontrar el elemento actual por lo que no es necesario encontrar el mismo elemento dos veces. var input = $(this) es más simple
    • gracias, acabo de hacer un poco de limpieza
    • hola señor y gracias – te gustaría ser capaz de desarrollar sessionStorage. En mi caso en particular, el usuario se aleja de un formulario, y luego trajo de vuelta a él, obviamente, cuando regresó no quiero que el usuario haga clic en el mismo menú desplegable de cada vez – que sería molesto para obtener a través de. cualquier idea muy apreciado.
    • si checked=»checked» en HTML y haga clic en el cuadro, a continuación, attr(«checked») todavía == «checked»
    • debe utilizar formObject[esto.id] = elem.la proposición(«checked»); para hacer que funcione. (jQuery 2.2.0)

  2. 1

    Me gustaría empezar por el uso de la dumbFormState plugin de jQuery.

    Ese plugin en realidad guarda automáticamente las cosas mientras que usted está escribiendo, etc. así que cuando vienen de regreso, su ya llenó de nuevo y usted no necesita del lado del servidor para hacerlo.

    Después de eso, me gustaría crear más de jQuery para cargar después de la dumbFormState plugin para, a continuación, mostrar/ocultar las áreas que están llenos. No es problema si usted llama a esto antes de que alguien alguna vez rellenar el formulario porque va a ser en blanco y su lógica no debe mostrar/ocultar las cosas que están en blanco de todos modos.

  3. 0

    Supongo que usted está buscando .serialize(), que serializa form data. Para ello, su input los elementos tienen que estar dentro de un form tag además, todos ellos tienen que tener name atributos.

    var form1data = $('#form1').serialize();
    
    alert(form1data);
    • Gracias por la sugerencia. Como apuntaba en mi pregunta, soy consciente de que el método serialize, sin embargo, que, para mí, parece que sólo una parte de la solución. Para restaurar la forma, tengo que leer el almacenado de datos serializados, y luego reconstruir la forma de la espalda para el estado, incluyendo todas sus entradas personalizadas.. es decir, si un segmento oculto era volver a introducir los valores personalizados, quiero traer eso de vuelta. ¿Cómo puedo hacerlo?
    • Yo no soy consciente de que algunos deserialize() método en el core de jQuery. Así que o bien el código de su propio analizador personalizado o buscar un plugin.
    • aquí está mi formstate plugin – una alternativa a la función serialize() y la falta unserialize() que funciona con objetos en lugar de cadenas; quería un ligero plugin que sólo se ocupa de la forma-estado, no con cadena-las representaciones de almacenamiento o métodos. Se encarga de radios, casillas de verificación, etc. de una manera sensible.
  4. 0

    Puede que desee poner los datos que no es el predeterminado en un json, a continuación, enviarlo a través de una petición post al servidor para ser salvos.

    Así, una vez que la persona regresa a la página automáticamente mira a ver si tienen algo guardado, y usted puede preguntar si quieren usar o rellenar el formulario de los datos guardados.

    Guardar valores predeterminados es un desperdicio de ancho de banda, ya que no es el cambio de lo que el formulario fue cuando se carga de todos modos.

    ACTUALIZACIÓN:

    Para guardarlo como un JSON creo que sería bastante fácil de construir en una cadena larga ya que el formato es fácil, así que usted acaba de enviar todo como una sola cadena.

    Usted lo desea, puede guardar también la etapa en la que se encuentran en, o, automáticamente guardar como van a cada etapa, que puede ser una mejor opción, en caso de que su ordenador se bloquea, no van a tener que empezar desde el principio otra vez, pero puede que desee que habilita una casilla de verificación para activar la auto-guardar.

Dejar respuesta

Please enter your comment!
Please enter your name here