Retrieve form data into a JavaScript object for sending to server using Ajax or fetch, including multiple checkboxes, multiple select options, multiple radio buttons, and multiple file uploads.

javascript-form-data.js

 /**
     * extracts form data, including checkboxes, multiple select options,
     * multiple file uploads,
     * and returns an iterable
     * @param {HTMLFormElement} form form to extract data
     */
    function extractFormData(form) {
        if (typeof form == 'undefined')
            throw new Error('Requires a form to iterate')
        else {
            let data = {}
            // reset object values first before iterating form
            Object.getOwnPropertyNames(data).forEach(key => {
                delete data[key]
            })
            for (let element of Array.from(form.elements)) {
                ['text', 'number', 'url', 'textarea', 'password', 'email'].forEach(type => {
                    if (element['type'].indexOf(type) != -1) {
                        data[element['name']] = element['value'].trim()
                    }
                })
                if (element['type'] == 'file') {
                    data[element['name']] = element['files'][0]
                }
                if (element['type'].indexOf('select') != -1) {
                    if (element.getAttribute('multiple') != undefined) {
                        try {
                            let multiValues = [],
                                options = Array.from(element.querySelectorAll('option'))
                            for (let option of options) {
                                if (option.selected)
                                    multiValues.push(option.value)
                            }
                            data[element['name']] = multiValues
                        } catch (err) {}
                    } else {
                        data[element['name']] = element['value']
                    }
                }
                // @ts-ignore
                if (element['type'] == 'checkbox')
                    data[element['name']] = element['value']
                // @ts-ignore
                if (element['type'] == 'radio' && element.checked)
                    data[element['name']] = element['value']
            }
            // delete empty keys
            Object.keys(data).forEach((key) => (key.length < 1) && delete data[key])
            return data
        }
    }


// to retrieve form data into an object,
var data = extractFormData(document.getElementById('id-of-form'));
// data variable contains an iterable of form data as retrieved from the form,
// in the format 
/*
 * { field1: 'value-1',
 *   field2: 'value-2',
 *   field3: 'value-3',
 * }
/*