formulaire de sérialiser javascript (pas de cadre)

La miniature de-sérialiser bibliothèque ne repose pas sur un cadre. Autre que quelque chose comme cela, vous aurez besoin de mettre en œuvre la fonction de sérialisation vous-même. (bien qu'à un poids de 1,2 kilo-octets, pourquoi ne pas l'utiliser?)

Pour les navigateurs modernes seulement

Si vous ciblez les navigateurs qui prennent en charge les URLSearchParams API (la plupart des navigateurs récents) et FormData(formElement) constructeur (la plupart des navigateurs récents à l'exception de Bord), utilisez ceci:

new URLSearchParams(new FormData(formElement)).toString()

Partout sauf IE

Pour les navigateurs qui prennent en charge URLSearchParams mais pas le FormData(formElement) constructeur, l'utilisation cette FormData polyfill et ce code (qui fonctionne partout sauf IE):

new URLSearchParams(Array.from(new FormData(formElement))).toString()

Exemple

JS:

var form = document.querySelector('form');
var out = document.querySelector('output');

function updateResult() {
  try {
    out.textContent = new URLSearchParams(Array.from(new FormData(form)));
    out.className = '';
  } catch (e) {
    out.textContent = e;
    out.className = 'error';
  }
}

updateResult();
form.addEventListener('input', updateResult);

CSS:

body { font-family: Arial, sans-serif; display: flex; flex-wrap: wrap; }
input[type="text"] { margin-left: 6px; max-width: 30px; }
label + label { margin-left: 10px; }
output { font-family: monospace; }
.error { color: #c00; }
div { margin-right: 30px; }

HTML:

<!-- FormData polyfill for older browsers -->
<script src="https://unpkg.com/[email protected]/formdata.min.js"></script>
<div>
  <h3>Form</h3>
  <form id="form">
    <label>x:<input type="text" name="x" value="1"></label>
    <label>y:<input type="text" name="y" value="2"></label>
    <label>
    z:
    <select name="z">
      <option value="a" selected>a</option>
      <option value="b" selected>b</option>
    </select>
  </label>
  </form>
</div>
<div>
  <h3>Query string</h3>
  <output for="form"></output>
</div>

Compatible avec IE 10

Même pour les anciens navigateurs (par exemple, IE 10), utilisez la FormData polyfill, un Array.from polyfill, si nécessaire, et ce code:

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

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, '+');
}

Désactivé les champs sont abandonnés et les noms sont également codées dans l'URL. Regex pour remplacer des %20 caractères a lieu qu'une fois, avant de retourner à la chaîne.

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

Si vous devez soumettre le formulaire "myForm" à l'aide de POST au format json que vous pouvez faire:

const formEntries = new FormData(myForm).entries();
const json = Object.assign(...Array.from(formEntries, ([x,y]) => ({[x]:y})));
fetch('/api/foo', {
method: 'POST',
body: JSON.stringify(json)
});

La deuxième ligne convertit à partir d'un tableau, par exemple:

[["firstProp", "firstValue"], ["secondProp", "secondValue"], ...and so on... ]

...en un objet, comme:

{"firstProp": "firstValue", "secondProp": "secondValue", ...and so on ... }

...il fait la conversion en passant par mapFn dans le Tableau.à partir de(). Cette mapFn est appliquée à chaque ["a","b"] paire et les convertit en {"a": "b"}, de sorte que le tableau contient beaucoup d'objets avec seulement une propriété dans chaque. Le mapFn est à l'aide de "déstructuration" pour obtenir des noms de la première et de la deuxième parties de la paire, et il est également à l'aide d'un ES6 "ComputedPropertyName" pour définir le nom de la propriété dans l'objet retourné par la mapFn (c'est pourquoi, il est dit "[x]: quelque chose" plutôt que simplement "x: quelque chose".

L'ensemble de ces propriétés d'objets sont ensuite passés en arguments de l'Objet.assign() fonction qui fusionne toutes les propriétés d'objets dans un objet unique qui a toutes les propriétés.

Tableau.à partir():
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Déstructuration des paramètres:
https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6/

Plus sur la propriété calculée noms ici:
Variable comme nom de propriété dans un objet JavaScript littérale?

Si vous êtes à la recherche pour sérialiser les entrées sur un événement. Voici un pur JavaScript approche que j'utilise.

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

De données sera un objet JavaScript à l'une des entrées.

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

À utiliser comme ceci:

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

J'espère que j'ai aidé.

J'ai attrapé les entrées() la méthode de formData de @moison réponse et à partir de MDN il est dit que :

Le FormData.entrées() la méthode retourne un itérateur permettant d'aller
à travers toutes les paires clé/valeur contenue dans cet objet. La clé de chaque
paire est une USVString objet; la valeur soit un USVString, ou un Blob.

mais le seul problème est que le navigateur mobile (android et safari ne sont pas pris en charge ) et IE et Safari bureau trop

mais, fondamentalement, voici ma démarche :

let theForm =  document.getElementById("contact"); 
theForm.onsubmit = function(event) {
event.preventDefault();
let rawData = new FormData(theForm);
let data = {};
for(let pair of rawData.entries()) {
data[pair[0]] = pair[1]; 
}
let contactData = JSON.stringify(data);
console.warn(contactData);
//here you can send a post request with content-type :'application.json'
};

le code peut être trouvé ici

À l'aide de JavaScript réduire la fonction doit faire un truc pour tous les navigateurs, y compris IE9 >:

Array.prototype.slice.call(form.elements) //convert form elements to array
.reduce(function(acc,cur){   //reduce 
var o = {type : cur.type, name : cur.name, value : cur.value}; //get needed keys
if(['checkbox','radio'].indexOf(cur.type) !==-1){
o.checked = cur.checked;
} else if(cur.type === 'select-multiple'){{
o.value=[];
for(i=0;i<cur.length;i++){
o.value.push({
value : cur.options[i].value,
selected : cur.options[i].selected
});
}
}
acc.push(o);
return acc;
},[]);

Live exemple ci-dessous.

JS:

var _formId = document.getElementById('formId'),
formData = Array.prototype.slice.call(_formId.elements).reduce(function(acc,cur,indx,arr){
var i,o = {type : cur.type, name : cur.name, value : cur.value};
if(['checkbox','radio'].indexOf(cur.type) !==-1){
o.checked = cur.checked;
} else if(cur.type === 'select-multiple'){
o.value=[];
for(i=0;i<cur.length;i++){
o.value.push({
value : cur.options[i].value,
selected : cur.options[i].selected
});
}
}
acc.push(o);
return acc;
},[]);
//view
document.getElementById('formOutput').innerHTML = JSON.stringify(formData, null, 4);

HTML:

<form id="formId">
<input type="text" name="texttype" value="some text">
<select>
<option value="Opt 1">Opt 1</option>
<option value="Opt 2" selected>Opt 2</option>
<option value="Opt 3">Opt 3</option>
</select>
<input type="checkbox" name="checkboxtype" value="Checkbox 1" checked> Checkbox 1
<input type="checkbox" name="checkboxtype" value="Checkbox 2"> Checkbox 2
<input type="radio" name="radiotype" value="Radio Btn 1"> Radio Btn 1
<input type="radio" name="radiotype" value="Radio Btn 2" checked> Radio Btn 2
<select multiple>
<option value="Multi 1" selected>Multi 1</option>
<option value="Multi 2">Saab</option>
<option value="Multi 3" selected>Multi 3</option>
</select>
</form>
<pre><code id="formOutput"></code></pre>

Des fins de débogage, ce qui pourrait vous aider:

function print_form_data(form) {
const form_data = new FormData(form);
for (const item of form_data.entries()) {
console.log(item);
}
return false;
}

Je pourrais être fou, mais je suis à la recherche de ces réponses sérieusement gonflé. Voici ma solution

function serialiseForm(form) {
var input = form.getElementsByTagName("input");
var formData = {};
for (var i = 0; i < input.length; i++) {
formData[input[i].name] = input[i].value;
}
return formData = JSON.stringify(formData);
}