jQuery plugin pour sérialiser un formulaire et également restaurer / remplir le formulaire?

Voici un petit quelque chose que j’ai construit en fonction du travail d’autres personnes, plus précisément 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); } }; 

J’ai développé Barnabas avec les réponses suivantes:

1. Prend en charge plusieurs entrées portant le même nom (les cases à cocher font généralement cela).

2. Mettre en cache les sélecteurs lorsque cela est possible, supprimer l’utilisation inutile 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.toSsortingng.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; } }; 

Merci à Barnabas Kendall pour la fonction initiale et à Eggert Jóhannesson pour la correction du bouton radio!

J’ai rencontré un problème avec les cases à cocher, si elles ne sont pas cochées, elles ne seront pas placées dans le tableau, jusqu’à présent, tout va bien. Mais comme l’état des cases à cocher n’est pas stocké lorsqu’elles ne sont pas cochées, je ne pouvais pas restaurer cet état si l’utilisateur les avait cochées lors de l’édition du formulaire.

J’ai donc étendu la fonctionnalité de restauration pour décocher toutes les cases à cocher qui ne sont pas dans le tableau de données. Cela garantira que l’état des cases à cocher est restauré correctement, peu importe ce qui a été modifié dans le formulaire avant d’exécuter la restauration:

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

Fonction complète:

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

Un grand merci à Barnabas Kendall pour sa réponse très utile.

Cependant, j’ai trouvé une erreur concernant la restauration des boutons radio; au lieu de sélectionner celui qui convient, il a simplement copié la valeur enregistrée sur tous les boutons du groupe.

Heureusement, c’est simple à réparer. Il suffit de remplacer

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

Avec

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

et il mettra correctement à jour les boutons radio

• Prend en charge plusieurs entrées portant le même nom (les cases à cocher font généralement cela).
• Sélecteurs de cache lorsque cela est possible
• Renvoie les valeurs pour toutes les entrées, si la checkbox ou la radio n’est pas définie, la valeur est null

• Désactive la checkbox ou la radio si la valeur est 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; } }; 

Découvrez mon plugin jQuery Populate:

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

Remplit tous les éléments de formulaire, ainsi que les étiquettes et tous les éléments HTML contenus.

Au cas où vous auriez besoin de gérer ce cas: – et vous, le type gourmand, avez besoin de la masortingce complète analysée:

Peupler:

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

Pour récupérer des valeurs:

Utilisez $('form').serialize() et transmettez les résultats à cette fonction:

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

Pour sérialiser dans une chaîne: var s = $('form').first().serialize();

Pour restaurer en fonction de cette chaîne: $('form').first().deserialize(s);

Bien sûr, vous aurez besoin d’un plugin de désérialisation tel que celui que j’avais posté ici .

 $.fn.deserialize = function (serializedSsortingng) { var $form = $(this); $form[0].reset(); serializedSsortingng = serializedSsortingng.replace(/\+/g, '%20'); var formFieldArray = serializedSsortingng.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; } 

Plus d’infos: https://stackoverflow.com/a/24441276/1766230

Voici un jsfiddle qui vous permet de jouer avec les valeurs de réglage, d’effacement, de réinitialisation et de “désérialisation”: http://jsfiddle.net/luken/4VVs3/