Foros del Web » Programando para Internet » Javascript »

Guardar Formulario en LocalStorage

Estas en el tema de Guardar Formulario en LocalStorage en el foro de Javascript en Foros del Web. Hola a todos, queria saber si hay alguna forma SIMPLE de guardar un formulario con varios input y select, en el LocalStorage con todos los ...
  #1 (permalink)  
Antiguo 01/06/2015, 16:53
 
Fecha de Ingreso: junio-2015
Mensajes: 2
Antigüedad: 8 años, 9 meses
Puntos: 0
Exclamación Guardar Formulario en LocalStorage

Hola a todos, queria saber si hay alguna forma SIMPLE de guardar un formulario con varios input y select, en el LocalStorage con todos los datos que se cargaron en cada input y select.

Lo que he echo hasta el momento es usar:



Código:
localstorage.setItem('form1',$('#form1').html(););

pero esto unicamente me guardar el html sin los datos que uno setea.

La idea en si es guardar los furmularios, son varios, y luego de finalizado el cargado de todos los datos realizar los submit correspondientes.
En si es como un proceso de alta de un cliente y en cada "pestaña" solicitar datos, con la idea de volver ATRAS por si se equivoco con algo (aca necesito el formulario con los datos que el cliente ingreso).

Bueno espero que se entienda lo que necesito, espero una pronta respuesta.

Saludos
  #2 (permalink)  
Antiguo 01/06/2015, 17:46
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: Guardar Formulario en LocalStorage

Bienvenido a FDW.

Te va a tocar guardar dato por dato pues no hay manera de que puedas tomar los datos de todos los elementos del formulario con una sola instrucción.

Podrías hacer algo como esto:

Código Javascript:
Ver original
  1. var elForm = document.querySelector("#form1"), //O simplemente 'form1'
  2.     valores = []; //Array en el que se guardarán los valores
  3.  
  4. [].forEach.call(elForm.elements, function(elemento){ //Recorro el conjunto de elementos
  5.     valores.push(elemento.value); //Guardo el valor de cada elemento en el array
  6. });
  7.  
  8. //Guardo todo de manera local
  9. localStorage.form1 = JSON.stringify({
  10.     elementos: elForm.innerHTML, //Los elementos del formulario
  11.     id: elForm.id || "", //El 'id' del formulario o una cadena vacía
  12.     method: elForm.method || "GET", //El método establecido o "GET"
  13.     action: elForm.action || "", //La dirección hacia la que se enviarán los datos o una cadena vacía
  14.     enctype: elForm.enctype || "", //El tipo de contenido del formulario o una cadena vacía
  15.     datos: valores //El array con los valores de los elementos del formulario
  16. });

Y para recuperarlo:

Código Javascript:
Ver original
  1. var guardado = JSON.parse(localStorage.form1), //Recupero todos los datos guardados
  2.     form = document.createElement("form"); //Creo un nuevo formulario
  3.  
  4. form.id = guardado.id; //Le asigno el 'id' guardado
  5. form.method = guardado.method; //Le asigno el 'method' guardado
  6. form.action = guardado.action; //Le asigno el 'action' guardado
  7. form.enctype = guardado.enctype; //Le asigno el 'enctype' guardado
  8. form.innerHTML = guardado.elementos; //Le asigno los elementos guardados
  9.    
  10. //Asigno los valores a los elementos
  11. for (var i = 0, els = form.elements, l = els.length; i < l; i++){
  12.     els[i].value = guardado.datos[i];
  13. }
  14.  
  15. document.body.appendChild(form); //Añado el formulario al documento

Como la cantidad de valores guardados debe de coincidir con la cantidad de elementos del formulario, uso un bucle que recorra al primer conjunto y, en cada iteración, asigno los valores a los campos.

Cabe recordar que para guardar localmente datos de múltiples tipos, lo aconsejable es guardarlos en un objeto literal y luego darle formato JSON (tal y como lo hice en este ejemplo). Para recuperarlos, hay que quitarle dicho formato y se podrá acceder a los valores guardados como se haría con cualquier objeto literal, ya sea mediante la notación por puntos o por corchetes.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 01/06/2015 a las 18:26 Razón: Mejora
  #3 (permalink)  
Antiguo 01/06/2015, 19:04
 
Fecha de Ingreso: enero-2014
Mensajes: 47
Antigüedad: 10 años, 2 meses
Puntos: 0
Respuesta: Guardar Formulario en LocalStorage

y porque no usas un plugin Jquery? tal vez Garlic.js?
  #4 (permalink)  
Antiguo 03/06/2015, 04:21
 
Fecha de Ingreso: junio-2015
Mensajes: 2
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Guardar Formulario en LocalStorage

Tengo una duda, corro el script pero me da error en la variable "elemento",
[].forEach.call(elForm.elements, function(elemento)

a que hace referencia ese valor pasado por parametro? porque no esta definida en ningun lado. gracias
  #5 (permalink)  
Antiguo 03/06/2015, 08:56
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: Guardar Formulario en LocalStorage

Hace referencia a cada elemento del conjunto de nodos contenidos en elForm.elements que no es otra cosa que el conjunto de elementos del formulario.

Solo por si las dudas, el código debe de estar dentro de una función, la cual debe de ser ejecutada después de haber ingresado los valores en los campos del formulario.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Etiquetas: form, jquery
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:41.