Tu peux le faire:

 var frm = $(document.myform); var data = JSON.ssortingngify(frm.serializeArray()); 

Voir JSON .

Utilisation:

 function form_to_json (selector) { var ary = $(selector).serializeArray(); var obj = {}; for (var a = 0; a < ary.length; a++) obj[ary[a].name] = ary[a].value; return obj; } 

Sortie:

 {"myfield": "myfield value", "passwordfield": "mypasswordvalue"} 

One-liner (pas de dépendances autres que jQuery), utilise la liaison d’object fixe pour la fonction transmise à la méthode map .

 $('form').serializeArray().map(function(x){this[x.name] = x.value; return this;}.bind({}))[0] 

Ce qu’il fait?

 "id=2&value=1&comment=ok" => Object { id: "2", value: "1", comment: "ok" } 

adapté aux applications Web progressives (on peut facilement prendre en charge les actions de soumission de formulaires aussi bien que les requêtes ajax)

Avec toutes les réponses données, il y a un problème qui est …

Si vous saisissez le nom sous forme de tableau comme name[key] , mais cela générera comme ceci

  name:{ key : value } 

Par exemple: Si j’ai un formulaire comme celui-ci.

Ensuite, il générera un object comme celui-ci avec toutes les réponses données.

 Object { name : 'value', name1[key1] : 'value1', name2[key2] : 'value2', name3[key3] : 'value3', } 

Mais il faut générer comme ci-dessous, n’importe qui veut obtenir comme ci-dessous.

 Object { name : 'value', name1 : { key1 : 'value1' }, name2 : { key2 : 'value2' }, name3 : { key2 : 'value2' } } 

Ensuite, essayez ce code ci-dessous js.

 (function($){ $.fn.getForm2obj = function(){ var _ = {},_t=this; this.c = function(k,v){ eval("c = typeof "+k+";"); if(c == 'undefined') _t.b(k,v);} this.b = function(k,v,a = 0){ if(a) eval(k+".push("+v+");"); else eval(k+"="+v+";"); }; $.map(this.serializeArray(),function(n){ if(n.name.indexOf('[') > -1 ){ var keys = n.name.match(/[a-zA-Z0-9_]+|(?=\[\])/g),le = Object.keys(keys).length,tmp = '_'; $.map(keys,function(key,i){ if(key == ''){ eval("ale = Object.keys("+tmp+").length;"); if(!ale) _t.b(tmp,'[]'); if(le == (i+1)) _t.b(tmp,"'"+n['value']+"'",1); else _t.b(tmp += "["+ale+"]",'{}'); }else{ _t.c(tmp += "['"+key+"']",'{}'); if(le == (i+1)) _t.b(tmp,"'"+n['value']+"'"); } }); }else _t.b("_['"+n['name']+"']","'"+n['value']+"'"); }); return _; } })(jQuery); console.log($('form').getForm2obj()); 

La simplicité est la meilleure ici. J’ai utilisé une chaîne simple remplacée par une expression régulière, et elles fonctionnaient comme un charme jusqu’à présent. Je ne suis pas un expert en expression régulière, mais je parie que vous pouvez même remplir des objects très complexes.

 var values = $(this).serialize(), atsortingbutes = {}; values.replace(/([^&]+)=([^&]*)/g, function (match, name, value) { atsortingbutes[name] = value; }); 

En utilisant la solution de maček , je l’ai modifiée pour fonctionner avec la manière dont ASP.NET MVC gère leurs objects nesteds / complexes sur le même formulaire. Tout ce que vous avez à faire est de modifier la pièce validée à ceci:

 "validate": /^[a-zA-Z][a-zA-Z0-9_]*((?:\[(?:\d*|[a-zA-Z0-9_]+)\])*(?:\.)[a-zA-Z][a-zA-Z0-9_]*)*$/, 

Cela correspondra puis mappera correctement les éléments avec des noms tels que:

Et

D’une réponse plus ancienne :

 $('form input,select').toArray().reduce(function(m,e){m[e.name] = $(e).val(); return m;},{}) 

La manière la plus simple et la plus précise que j’ai trouvée pour ce problème était d’utiliser le plugin bbq ou celui- ci (qui a une taille d’environ 0,5 Ko).

il fonctionne également avec des tableaux multidimensionnels.

 $.fn.serializeObject = function() { return $.deparam(this.serialize()); }; 

J’ai trouvé un problème avec le code de Tobias Cohen (je n’ai pas assez de points pour le commenter directement), qui fonctionne autrement pour moi. Si vous avez deux options select avec le même nom, les deux avec value = “”, le code original produira “name”: “” au lieu de “name”: [“”, “”]

Je pense que cela peut être corrigé en ajoutant “|| o [this.name] == ”” à la première condition:

 $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name] || o[this.name] == '') { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; 

Si vous essayez de convertir tous les champs de formulaire en JSON afin de soumettre ce formulaire via Ajax, voici un plug – in de formulaire jQuery qui le fait.

Il y a un plugin pour faire ça juste pour jQuery, jquery.serializeJSON . Je l’ai utilisé avec succès sur quelques projets maintenant. Il fonctionne comme un charme.

Je préfère cette approche car: vous n’avez pas à parcourir plus de 2 collections, vous pouvez obtenir des choses autres que “name” et “value” si nécessaire, et vous pouvez assainir vos valeurs avant de les stocker dans l’object ( si vous avez des valeurs par défaut que vous ne souhaitez pas stocker, par exemple).

 $.formObject = function($o) { var o = {}, real_value = function($field) { var val = $field.val() || ""; // additional cleaning here, if needed return val; }; if (typeof o != "object") { $o = $(o); } $(":input[name]", $o).each(function(i, field) { var $field = $(field), name = $field.attr("name"), value = real_value($field); if (o[name]) { if (!$.isArray(o[name])) { o[name] = [o[name]]; } o[name].push(value); } else { o[name] = value; } }); return o; } 

Utilisez comme ça:

 var obj = $.formObject($("#someForm")); 

Seulement testé dans Firefox.

Transformez n’importe quoi en object (non testé par l’unité)

La sortie de test:

 $(document).ready(function() { console.log(array.print(node.objectivey($("form"), {}))); console.log(array.print(node.objectivey($("form"), {selector: "select"}))); }); 

sur

 
   select          

va donner:

 { input: { a: text, b: select }, otherinput: { c: { a: a, 0: b, 1: d }, d: { b: c } }, anotherinput: 1 } { input: { b: select } } 

J’ai trouvé un problème avec la solution sélectionnée.

Lorsque vous utilisez des formulaires qui ont des noms basés sur des tableaux, la fonction jQuery serializeArray () est réellement morte.

J’ai un framework PHP qui utilise des noms de champs basés sur des tableaux pour permettre à un même formulaire d’être placé sur la même page plusieurs fois dans plusieurs vues. Cela peut être pratique pour append, éditer et supprimer à la fois les modèles sans conflit.

Puisque je voulais séraliser les formulaires sans avoir à sortir cette fonctionnalité de base absolue, j’ai décidé d’écrire mon propre seralizeArray ():

  var $vals = {}; $("#video_edit_form input").each(function(i){ var name = $(this).attr("name").replace(/editSingleForm\[/i, ''); name = name.replace(/\]/i, ''); switch($(this).attr("type")){ case "text": $vals[name] = $(this).val(); break; case "checkbox": if($(this).attr("checked")){ $vals[name] = $(this).val(); } break; case "radio": if($(this).attr("checked")){ $vals[name] = $(this).val(); } break; default: break; } }); 

Veuillez noter que ceci fonctionne également en dehors du formulaire submit (), donc si une erreur survient dans le rest de votre code, le formulaire ne sera pas envoyé si vous placez un lien indiquant “Enregistrer les modifications”.

Notez également que cette fonction ne doit jamais être utilisée pour valider le formulaire uniquement pour rassembler les données à envoyer côté serveur pour validation. L’utilisation d’un code aussi faible et atsortingbué en masse causera XSS , etc.

J’ai eu le même problème récemment et est sorti avec ce plugin .toJSON jQuery qui convertit un formulaire en un object JSON avec la même structure. Ceci est également particulièrement utile pour les formulaires générés dynamicment où vous voulez laisser votre utilisateur append plus de champs à des endroits spécifiques.

Le fait est que vous pouvez réellement vouloir créer un formulaire pour qu’il ait lui-même une structure, alors supposons que vous vouliez créer un formulaire où l’utilisateur insère ses endroits préférés en ville: vous pouvez imaginer que ce formulaire représente un ... Elément XML contenant une liste de lieux que l’utilisateur aime ainsi une liste d’éléments ... chacun contenant par exemple un élément ... , un ... element and then a list of ... elements to represent the activities you can perform in such a place. So your XML structure would be like this:

   Home dwelling sleep eat watch TV  ... ...  

How cool would it be to have a JSON object out of this which would represent this exact structure so you’ll be able to either:

• Store this object as it is in any CouchDB -like database
• Read it from your $_POST[] server side and resortingve a correctly nested array you can then semantically manipulate
• Use some server-side script to convert it into a well-formed XML file (even if you don’t know its exact structure a-priori)
• Just somehow use it as it is in any Node.js -like server script

OK, so now we need to think how a form can represent an XML file.

Of course the

tag is the root , but then we have that element which is a container and not a data element itself, so we cannot use an input tag for it.

Here’s where the

tag comes in handy! We’ll use

tags to represent all container elements in our form/XML representation and so getting to a result like this:

 
 
   Dwelling Restoration Sport Administrative     
  

As you can see in this form, we’re breaking the rule of unique names, but this is OK because they’ll be converted into an array of element thus they’ll be referenced only by their index inside the array.

At this point you can see how there’s no name="array[]" like name inside the form and everything is pretty, simple and semantic.

Now we want this form to be converted into a JSON object which will look like this:

 {'places':{ 'place':[ { 'name': 'Home', 'type': 'dwelling', 'activity':[ 'sleep', 'eat', 'watch TV' ] }, {...}, {...} ] }} 

To do this I have developed this jQuery plugin here which someone helped optimizing in this Code Review thread and looks like this:

 $.fn.toJSO = function () { var obj = {}, $kids = $(this).children('[name]'); if (!$kids.length) { return $(this).val(); } $kids.each(function () { var $el = $(this), name = $el.attr('name'); if ($el.siblings("[name=" + name + "]").length) { if (!/radio|checkbox/i.test($el.attr('type')) || $el.prop('checked')) { obj[name] = obj[name] || []; obj[name].push($el.toJSO()); } } else { obj[name] = $el.toJSO(); } }); return obj; }; 

I also made this one blog post to explain this more.

This converts everything in a form to JSON (even radio and check boxes) and all you’ll have left to do is call

 $.post('script.php',('form').toJSO(), ...); 

I know there’s plenty of ways to convert forms into JSON objects and sure .serialize() and .serializeArray() work great in most cases and are mostly intended to be used, but I think this whole idea of writing a form as an XML structure with meaningful names and converting it into a well-formed JSON object is worth the try, also the fact you can add same-name input tags without worrying is very useful if you need to resortingve dynamically generated forms data.

J’espère que ça aidera quelqu’un!

I coded a form to a multidimensional JavaScript object myself to use it in production. The result is https://github.com/serbanghita/formToObject.js .

I like samuels version, but I believe it has a small error. Normally JSON is sent as

{“coreSKU”:”PCGUYJS”,”name_de”:”whatever”,…

NOT as

[{“coreSKU”:”PCGUYJS”},{“name_de”:”whatever”},…

so the function IMO should read:

 App.toJson = function( selector ) { var o = {}; $.map( $( selector ), function( n,i ) { o[n.name] = $(n).val(); }); return o; } 

and to wrap it in data array (as commonly expected, too), and finally send it as assortingng App.ssortingngify( {data:App.toJson( ‘#cropform :input’ )} )

For the ssortingngify look at Question 3593046 for the lean version, at json2.js for the every-eventuality-covered version. That should cover it all 🙂

For a quick, modern solution, use the JSONify jQuery plugin. The example below is taken verbatim from the GitHub README. All credit to Kushal Pandya, author of the plugin.

Donné:

 
 Name:  Email  Password   

Running:

 $('#myform').jsonify(); 

Produit:

 {"name":"Joe User","email":"[email protected]","password":"mypass"} 

If you want to do a jQuery POST with this JSON object:

 $('#mybutton').click(function() { $.post('/api/user', JSON.ssortingngify($('#myform').jsonify())); } 

Another answer

 document.addEventListener("DOMContentLoaded", function() { setInterval(function() { var form = document.getElementById('form') || document.querySelector('form[name="userprofile"]'); var json = Array.from(new FormData(form)).map(function(e,i) {this[e[0]]=e[1]; return this;}.bind({}))[0]; console.log(json) document.querySelector('#asJSON').value = JSON.ssortingngify(json); }, 1000); }) 

 
 
Name 
 
Family name 
 
Work 
 
Works since 
 
Photo 
 
Send 
 
 JSON:  

I wouldn’t use this on a live site due to XSS attacks and probably plenty of other issues, but here’s a quick example of what you could do:

 $("#myform").submit(function(){ var arr = $(this).serializeArray(); var json = ""; jQuery.each(arr, function(){ jQuery.each(this, function(i, val){ if (i=="name") { json += '"' + val + '":'; } else if (i=="value") { json += '"' + val.replace(/"/g, '\\"') + '",'; } }); }); json = "{" + json.subssortingng(0, json.length - 1) + "}"; // do something with json return false; });