Welcome to Form Observer

This library aims to simplify and enhance the functionality of the Forms in Vanilla JS.

It creates an object, starting from a Form, and exposes various methods that simplifies working with form, especially with large forms.

Why should i use it?

The main idea behind this library is to automatize the manipulation of forms data.

Old way

To access and read data from a form usually you should access the DOM, get the input by id or other identifier, and then get its value.

document.querySelector('#myInput').value 

// OR

let form = document.querySelector('#myForm');

form.querySelector('[name="myInputName"]').value

Same story for changing the value of an input...

document.querySelector('#myInput').value = 'new value'

// OR

...

form.querySelector('[name="myInputName"]').value = 'new value'

And this becomes more complex if you had to change Radios, Checkboxes or Selects.

New way to do it

Once initialized on a form, the library adds a property on it, by default is 'fo'. This property contains shortcuts to get and set any value in the form.

// Once the library was initialized on a form
let form_observer = document.querySelector('#myForm').fo;

form_observer.myInputName // returns the value of the input
form_observer.myInputName = 'new value' // sets the new value of the input

How can i use it?

• First of all, you must import it:

  import { FormObserver } from 'FormObserver';

• Then the library must be initialized on the desired Form:

  const htmlForm = document.querySelector('#myForm');
  
  const myForm = new FormObserver(null, htmlForm);
  
  // OR it can be declared and initialized in two different moments
  
  const formObserver = new FormObserver(settings);
  
  const myForm = formObserver.init(htmlForm);

• Once initialized, you can save a reference of the returned object (in the above example is 'myForm') or you can access the property 'fo' on the form which was used to initialize the library.

  // Once the library was already initialized
  const myForm = document.querySelector('#myForm').fo
  
  // OR 
  
  // It initializes and stores a reference of the 'fo' property of the form
  const myForm = new FormObserver(settings, htmlForm, dataToFill);

Compatibility

The library is fully compatible with ALL browsers >= IE9