JSFiddle - React, Tailwind, and code Playground

by Hari Menon

HTML

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <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" value="test" />
      <input type="text" name="qux" />
    </form>
  </body>
</html>

JavaScript

const getFormData = function(formId) {
  const result = {};
  
  const form = document.querySelector(formId);
  
  if (!!form) {
    const inputs = form.querySelectorAll('input[type="text"]');
    let parent = result;
    for (var i of inputs) { // i = 'foo.baz.qux'
      let parts = i.name.split('.'); 
      for (let x = 0; x < parts.length; x++) {
          let currentPart = parts[x]; // currentPart = foo, baz
          if (x === parts.length - 1) {
	          parent[currentPart] = i.value; // result = { foo:{ baz : { qux: 'test' } }, qux: "test-1" } 
          } else {
          	parent[currentPart] = {};
          }
          parent = parent[currentPart];
      }
      parent = result;
    }
  }

  return result;
};

var x = getFormData('#foo-bar-baz-qux');

console.log(x);