Serialize an HTML form to JSON

form.js

var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
    event.preventDefault();
    submitForm();
}

function submitForm(form) {
        var data = serializeForm(form);
        var json = JSON.stringify(data);
        var xhr = requestPost(url, json);
        // etc.
        
}

function serializeForm(form) {
    // Serialize a <form> element to JSON:
    // - a <fieldset> becomes an object
    // - a <section> becomes a list
    // - <input type="radio"> becomes the selected value (or null)
    // - <input type="checkbox"> becomes a list of selected values
    // - all other <input> will return their value
    // - <select> it's selected value
    // - <textarea> will return it's text value
    return serializeFormObject(form);
}

function serializeFormObject(element) {
    var obj = {};
    element.childNodes.forEach(el => {
        if (el.nodeName == 'SECTION') {
            var key = el.dataset.name || 'children';
            obj[key] = serializeFormArray(el);
        } else if (el.nodeName == 'INPUT') {
            var key = el.name;
            if (el.type == 'checkbox') {
                if (!Array.isArray(obj[key])) {
                    obj[key] = [];
                }
                if (el.checked) {
                    obj[key].push(el.value);
                }
            } else if (el.type == 'radio') {
                if (! obj.hasOwnProperty(key)) {
                    obj[key] = null;
                }
                if (el.checked) {
                    obj[key] = el.value;
                }
            } else {
                obj[key] = el.value;
            }
        } else if (el.nodeName == 'TEXTAREA') {
            var key = el.name;
            obj[key] = el.value.trim();
        } else if (el.nodeName == 'SELECT') {
            var key = el.name;
            obj[key] = el.value;
        } else {
            var obj_ = serializeFormObject(el);
            Object.assign(obj, obj_);
        }

    });
    return obj;
}

function serializeFormArray(element) {
    var arr = [];
    element.childNodes.forEach(el => {
        var obj = serializeFormObject(el);
        if (Object.getOwnPropertyNames(obj).length > 0) {
            arr.push(obj);
        }
    });
    return arr;
}