// form binding class
class FormBind {
  
  #Field = {};
  
  constructor(form) {
    
    // initialize object properties
    const elements = form.elements;
    for (let f = 1; f < elements.length; f++) {
      
      const field = elements[f], name = field.name;
      if (name) {
        this[name] = field.value;
        this.#Field[name] = field;
      }
      
    }

    // form change events
    form.addEventListener('input', e => {
      
      const name = e.target.name;
      if (this.#Field[ name ]) {
        this[ name ] = this.#Field[ name ].value;
      }
      
    });
    
  }
  
  
  // update property and field
  updateValue(property, newValue) {
    
    if (this.#Field[ property ]) {
      
      this[property] = newValue;
      this.#Field[property].value = newValue;
      return true;
      
    }
    
    return false;
    
  }
  
}


// form proxy traps
const FormProxy = {

  // intercept set
  set(target, property, newValue) {
    return target.updateValue(property, newValue);
  }
  
};


// form 2-way data binder
function FormBinder(form) {
  return form ? new Proxy(new FormBind(form), FormProxy) : undefined;
}



// form reference
const myformElement = document.getElementById('myform');

// prevent submit and show current properties
myformElement.addEventListener('submit', e => {
  e.preventDefault();
  showProperties(myForm);
});


// create 2-way data form
const myForm = FormBinder(myformElement);

myForm.name = "Some Name";
myForm.email = 'test@email.com';
myForm.comments = 'no comment';

// show form properties
function showProperties(obj) {
  
  console.clear();
  console.log('Current values:');
  for (const p in obj) {
    console.log(`${ p }: ${ obj[ p ] }`)
  }
  
}