Is there a better/simpler way to serializing a html form to an object

Question

I am sending a form with both radio and checkbox inputs (so multiple elements have the same name) and this is what I've come up with.

Is there a faster/simpler way with pure JavaScript approach to turn an HTML form into a object so I can use JSON.stringify?

No frameworks or libraries.

function serialize_form(felement) {
    const names = new Set();
    let values = {}
    for(let i = 0; i < felement.elements.length; i++) {
        if(felement[i].name && (felement.name != undefined || felement.name != "")){
            names.add(felement[i].name)
        }
    }

    for(let name of names) {
        values[name] = felement[name].value;
    }

   console.log(names, values);

   return values;
}

Answer 1

You can do some simple transformations using FormData.keys() and FormData.getAll()

document.querySelector("form").addEventListener("submit", e => {
  e.preventDefault()
  
  const fd = new FormData(e.target)
  const obj = Object.fromEntries(Array.from(fd.keys(), key => {
    const val = fd.getAll(key)
    return [ key, val.length > 1 ? val : val.pop() ]
  }))
  
  document.querySelector("pre").innerHTML = JSON.stringify(obj, null, 2)
})

<form>
  <p><input type="text" name="text" value="text value"></p>
  <p>
    Checkboxes:
    <label>Foo <input type="checkbox" value="foo" name="checkbox"></label>
    <label>Bar <input type="checkbox" value="bar" name="checkbox"></label>
    <label>Baz <input type="checkbox" value="baz" name="checkbox"></label>
  </p>
  <p>
    Select:
    <select name="select" multiple>
      <option>foo</option>
      <option>bar</option>
      <option>baz</option>
    </select>
  </p>
  <p><button>Serialize</button></p>
</form>
<pre></pre>

Note that this changes values between arrays and strings based on how many selections are made. If you want a more consistent API, just use arrays for every value even if there's only one selection.

const obj = Object.fromEntries(Array.from(fd.keys(), key => 
  [ key, fd.getAll(key) ]))

Answer 2

Thanks to @brad pointing out FormData I was able to cut my serialize_form function down and that led to this answer https://stackoverflow.com/a/46774073/9908.

function serialize_form(felement) {
            const fd = new FormData(felement);
            let object = {};


            fd.forEach((value, key) => {
            // Reflect.has in favor of: object.hasOwnProperty(key)
                if(!Reflect.has(object, key)){
                    object[key] = value;
                    return;
                }
                if(!Array.isArray(object[key])){
                    object[key] = [object[key]];
                }
                object[key].push(value);
            });
            console.log(object);
            return object;
        }