form2

by thewolff

HTML

<form id="foo-bar" >
      <input type="text" name="foo.bar" />
    </form>
    <form id="foo-bar-baz-qux" >
      <input type="text" name="foo.bar" />
      <input type="text" name="foo.baz.qux" />
      <input type="text" name="qux" />
    </form>

JavaScript

const setValue = (obj, keys, value) => {
	var key = keys[0];
       if (keys.length === 1) {
          obj[key] = value;
       } else {
          if (!obj[key]) {
             obj[key] = {};
          }
          setValue(obj, keys.slice(1), value);
       }
}

const readFormObj = (id) => {
  let inputsList = document.querySelectorAll(`#${id} input[type="text"]`)
  let data = {};
  
  for(let i = 0, len = inputsList.length; i < len; i++) {
  	let input = inputsList[i];
    data[input.name] = input.value
  }
  
  let result = {}
  
  for(name in data) {
  	let nameArr = name.split('.');
    let value = data[name];
    setValue(result, nameArr, value)
  }
  
  return result;
}

console.log(readFormObj('foo-bar-baz-qux'))