Convertire un form in JSON con Javascript

In questo articolo vi propongo due metodi per serializzare un form usando Javascript.

Quello che otterremo sarà un JSON con le chiavi che corrispondono al name del campo, e il value che corrisponde al valore.

Cominciamo con un primo esempio:

const inputs = Array.from(document.querySelectorAll("input, select, textarea"));
const data = inputs.reduce(
    (object, key) => ({...object, [key.name]: key.value}), {}
);
console.log(JSON.stringify(data));

Qui prendiamo tutto il document, quindi potrebbe non funzionare nel caso abbiate più form nella stessa pagina.

Un'alternativa è questa:

const myForm = document.getElementById('my_form');
let formData = {};
for (let i = 0; i < myForm.elements.length; i++) {
    let element = myForm.elements[i];
    if (element.type !== "button") {
    formData[element.name] = element.value;
    }
}
let data = JSON.stringify(formData);
console.log(data);

Enjoy!