Forme sérialiser javascript (sans cadre)

Cette bibliothèque miniature ne repose pas sur un cadre. Sauf quelque chose comme ça, vous devrez implémenter la fonction de sérialisation vous-même. (Bien qu'à un poids de 1,2 kilobytes, pourquoi ne pas l'utiliser?)

Voici une approche purement JavaScript:

 var form = document.querySelector('form'); var data = new FormData(form); var req = new XMLHttpRequest(); req.send(data); 

Bien qu'il semble fonctionner uniquement pour les demandes POST.

https://developer.mozilla.org/en-US/docs/Web/API/FormData

  function serialize (form) { if (!form || form.nodeName !== "FORM") { return; } var i, j, q = []; for (i = form.elements.length - 1; i >= 0; i = i - 1) { if (form.elements[i].name === "") { continue; } switch (form.elements[i].nodeName) { case 'INPUT': switch (form.elements[i].type) { case 'text': case 'hidden': case 'password': case 'button': case 'reset': case 'submit': q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value)); break; case 'checkbox': case 'radio': if (form.elements[i].checked) { q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value)); } break; } break; case 'file': break; case 'TEXTAREA': q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value)); break; case 'SELECT': switch (form.elements[i].type) { case 'select-one': q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value)); break; case 'select-multiple': for (j = form.elements[i].options.length - 1; j >= 0; j = j - 1) { if (form.elements[i].options[j].selected) { q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].options[j].value)); } } break; } break; case 'BUTTON': switch (form.elements[i].type) { case 'reset': case 'submit': case 'button': q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value)); break; } break; } } return q.join("&"); } 

Source: http://code.google.com/p/form-serialize/source/browse/trunk/serialize-0.1.js

Voici une version légèrement modifiée de TibTibs ':

 function serialize(form) { var field, s = []; if (typeof form == 'object' && form.nodeName == "FORM") { var len = form.elements.length; for (i=0; i<len; i++) { field = form.elements[i]; if (field.name && !field.disabled && field.type != 'file' && field.type != 'reset' && field.type != 'submit' && field.type != 'button') { if (field.type == 'select-multiple') { for (j=form.elements[i].options.length-1; j>=0; j--) { if(field.options[j].selected) s[s.length] = encodeURIComponent(field.name) + "=" + encodeURIComponent(field.options[j].value); } } else if ((field.type != 'checkbox' && field.type != 'radio') || field.checked) { s[s.length] = encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value); } } } } return s.join('&').replace(/%20/g, '+'); } 

Les champs désactivés sont ignorés et les noms sont également encodés en URL. Le remplacement Regex de% 20 caractères s'effectue une seule fois, avant de renvoyer la chaîne.

La chaîne de requête est identique au résultat de la méthode $ .serialize () de jQuery.

J'ai commencé par la réponse de Johndave Decano.

Cela devrait résoudre quelques-uns des problèmes mentionnés dans les réponses à sa fonction.

1. Remplacer% 20 par un symbole +.
2. Les types de soumission / bouton ne seront soumis que s'ils ont été cliqués pour soumettre le formulaire.
3. Les boutons de réinitialisation seront ignorés.
4. Le code m'a semblé redondant, car il fait essentiellement la même chose indépendamment des types de terrain. Sans oublier l'incompatibilité avec les types de champs HTML5 tels que «tel» et «courrier électronique», j'ai donc supprimé la plupart des détails avec les instructions de commutation.

Les types de boutons seront toujours ignorés s'ils n'ont pas de valeur de nom.

 function serialize(form, evt){ var evt = evt || window.event; evt.target = evt.target || evt.srcElement || null; var field, query=''; if(typeof form == 'object' && form.nodeName == "FORM"){ for(i=form.elements.length-1; i>=0; i--){ field = form.elements[i]; if(field.name && field.type != 'file' && field.type != 'reset'){ if(field.type == 'select-multiple'){ for(j=form.elements[i].options.length-1; j>=0; j--){ if(field.options[j].selected){ query += '&' + field.name + "=" + encodeURIComponent(field.options[j].value).replace(/%20/g,'+'); } } } else{ if((field.type != 'submit' && field.type != 'button') || evt.target == field){ if((field.type != 'checkbox' && field.type != 'radio') || field.checked){ query += '&' + field.name + "=" + encodeURIComponent(field.value).replace(/%20/g,'+'); } } } } } } return query.substr(1); } 

C'est comme ça que j'utilise actuellement cette fonction.

 <form onsubmit="myAjax('http://example.com/services/email.php', 'POST', serialize(this, event))"> 

Voici un modèle JavaScript moderne qui reçoit une chaîne de requête à partir d'un nœud de formulaire:

 Array.from(new FormData(formElement).entries(), e => e.map(encodeURIComponent).join('=')).join('&') 

Fonctionne dans tous les navigateurs modernes, y compris MS Edge (mais pas IE).

 HTMLElement.prototype.serialize = function(){ var obj = {}; var elements = this.querySelectorAll( "input, select, textarea" ); for( var i = 0; i < elements.length; ++i ) { var element = elements[i]; var name = element.name; var value = element.value; if( name ) { obj[ name ] = value; } } return JSON.stringify( obj ); } 

Pour utiliser comme ceci:

 var dataToSend = document.querySelector("form").serialize(); 

J'espère avoir aidé.

Si vous cherchez à sérialiser les entrées d'un événement. Voici une approche pure JavaScript que j'utilise.

 // serialize form var data = {}; var inputs = [].slice.call(e.target.getElementsByTagName('input')); inputs.forEach(input => { data[input.name] = input.value; }); 

Les données seront un objet JavaScript des entrées.

Une version révisée du code @ SimonSteinberger utilisant moins de variables et profitant de la vitesse des boucles de forEach boucle (qui sont un peu plus rapide que for s)

 function serialize(form) { var result = []; if (typeof form === 'object' && form.nodeName === 'FORM') Array.prototype.slice.call(form.elements).forEach(function(control) { if ( control.name && !control.disabled && ['file', 'reset', 'submit', 'button'].indexOf(control.type) === -1 ) if (control.type === 'select-multiple') Array.prototype.slice.call(control.options).forEach(function(option) { if (option.selected) result.push(encodeURIComponent(control.name) + '=' + encodeURIComponent(option.value)); }); else if ( ['checkbox', 'radio'].indexOf(control.type) === -1 || control.checked ) result.push(encodeURIComponent(control.name) + '=' + encodeURIComponent(control.value)); }); return result.join('&').replace(/%20/g, '+'); } 

J'ai refacturé la réponse de TibTibs dans quelque chose qui est beaucoup plus clair à lire. C'est un peu plus long en raison de la largeur de 80 caractères et de quelques commentaires.

En outre, il ignore les noms de champs vierges et les valeurs vides.

 // Serialize the specified form into a query string. // // Returns a blank string if +form+ is not actually a form element. function $serialize(form, evt) { if(typeof(form) !== 'object' && form.nodeName !== "FORM") return ''; var evt = evt || window.event || { target: null }; evt.target = evt.target || evt.srcElement || null; var field, query = ''; // Transform a form field into a query-string-friendly // serialized form. // // [NOTE]: Replaces blank spaces from its standard '%20' representation // into the non-standard (though widely used) '+'. var encode = function(field, name) { if (field.disabled) return ''; return '&' + (name || field.name) + '=' + encodeURIComponent(field.value).replace(/%20/g,'+'); } // Fields without names can't be serialized. var hasName = function(el) { return (el.name && el.name.length > 0) } // Ignore the usual suspects: file inputs, reset buttons, // buttons that did not submit the form and unchecked // radio buttons and checkboxes. var ignorableField = function(el, evt) { return ((el.type == 'file' || el.type == 'reset') || ((el.type == 'submit' || el.type == 'button') && evt.target != el) || ((el.type == 'checkbox' || el.type == 'radio') && !el.checked)) } var parseMultiSelect = function(field) { var q = ''; for (var j=field.options.length-1; j>=0; j--) { if (field.options[j].selected) { q += encode(field.options[j], field.name); } } return q; }; for(i = form.elements.length - 1; i >= 0; i--) { field = form.elements[i]; if (!hasName(field) || field.value == '' || ignorableField(field, evt)) continue; query += (field.type == 'select-multiple') ? parseMultiSelect(field) : encode(field); } return (query.length == 0) ? '' : query.substr(1); }