Utiliser jQuery pour stocker l’état d’un formulaire compliqué

J’ai un formulaire assez compliqué avec de nombreuses “étapes” qui sont remplies par l’utilisateur. Certaines étapes (que vous considérez comme des segments de formulaire) ont des options par défaut, mais en cliquant sur “Entrer des valeurs personnalisées”, elles affichent un ensemble de champs masqués dans lequel l’utilisateur peut entrer des informations.

  Mode A  Mode B Choose one of the above for applying average coefficient values of "a" or "b" to 100% of your product or enter custom values 
  %a:  coeff. a  %b:  coeff. b  Enter custom values above or choose average values

Il existe plusieurs segments de ce type, par exemple, # s1 .. # s7. Voici ma tâche. Je veux permettre à l’utilisateur de sauvegarder l’état d’un formulaire. Ainsi, une fois qu’un utilisateur a rempli l’intégralité du formulaire, choisi des valeurs par défaut moyennes pour certains segments et saisi des valeurs personnalisées pour d’autres, il peut cliquer sur un bouton et enregistrer l’état complet à des fins de décongélation ultérieure. Je pense que si je peux sauvegarder l’état dans un object que je peux sérialiser, je peux le sauvegarder dans une table de firebase database ou dans un autre stockage persistant.

L’utilisateur peut revenir plus tard et reconstruire toute la session précédente.

Comment puis-je faire cela? Il y a le plugin getAtsortingbutes http://plugins.jquery.com/project/getAtsortingbutes , et la méthode sérialisation jQuery, mais je ne peux pas pour commencer. S’il te plaît, donne-moi un coup de pouce dans la bonne direction.

Voici quelques fonctions pour vous aider dans ce processus. formToSsortingng sérialise un formulaire en tant que chaîne, et ssortingngToForm fait l’inverse:

 function formToSsortingng(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(); } } }); formSsortingng = JSON.ssortingngify(formObject); return formSsortingng; } function ssortingngToForm(formSsortingng, unfilledForm) { formObject = JSON.parse(formSsortingng); 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]); } } }); }

Usage:

 // Convert form to ssortingng var formSsortingng = formToSsortingng($("#myForm")); // Save ssortingng somewhere, eg localStorage // ... // Restore form from ssortingng ssortingngToForm(formSsortingng, $("#myForm"));

Je commencerais par utiliser le plugin dumbFormState jQuery .

Ce plugin enregistre automatiquement les choses lorsque vous tapez, etc. Ainsi, quand elles reviennent, elles sont déjà remplies à nouveau et vous n’avez pas besoin du côté serveur pour le faire.

Après cela, je créerais jQuery à charger après le plugin dumbFormState pour ensuite afficher / masquer les zones remplies. Ce n’est pas un problème si vous appelez cela avant que quelqu’un remplisse son formulaire, car il sera vide et votre logique ne devrait pas afficher / masquer les éléments qui sont vides de toute façon.

Je suppose que vous recherchez .serialize () , qui sérialise les form data . Pour ce faire, vos éléments d’ input doivent figurer dans une form tag et tous doivent avoir des atsortingbuts de name .

 var form1data = $('#form1').serialize(); alert(form1data);

Vous voudrez peut-être simplement mettre les données qui ne sont pas par défaut dans un JSON, puis les envoyer via une demande de publication au serveur pour qu’elles soient sauvegardées.

Ainsi, une fois que la personne retourne à la page, vous regardez automatiquement si elle a enregistré quelque chose et vous pouvez demander si elle souhaite l’utiliser ou remplir le formulaire à partir des données enregistrées.

L’enregistrement des valeurs par défaut est un gaspillage de bande passante, car vous ne le modifierez pas de ce qu’il était dans le formulaire lors de son chargement.

METTRE À JOUR:

Pour le sauvegarder en tant que JSON, je pense qu’il serait assez facile de simplement le construire en une longue chaîne, car le format est facile, vous ne ferez donc que tout envoyer en une seule chaîne.

Vous voudrez peut-être aussi sauvegarder l’étape où ils se trouvent, ou automatiquement à chaque étape, ce qui peut être une meilleure option, au cas où leur ordinateur tomberait en panne, ils n’auraient pas à redémarrer au début voulez que cela soit activé par une case à cocher, pour activer la sauvegarde automatique.