expand forms

.gitignore

@@ -2,3 +2,4 @@ tests/jasmin*
 vendor
 .vscode
 *.cache
+.directory

UI/Component/Form.js

@@ -163,6 +163,30 @@ export class Form
                 self.submit(self.forms[id], submits[i]);
             });
         }
+
+        // if true submit form on change
+        if (this.forms[id].isOnChange()) {
+            const hasUiContainer = this.forms[id].getFormElement().getAttribute('data-ui-content');
+            const onChangeContainer = hasUiContainer !== null
+                ? this.forms[id].getFormElement().querySelector(hasUiContainer)
+                : this.forms[id].getFormElement();
+
+            onChangeContainer.addEventListener('change', function (event)
+            {
+                jsOMS.preventAll(event);
+
+                const target = event.target.tagName.toLowerCase();
+
+                if (target === 'input' || target === 'textarea') {
+                    let dataParent = null;
+                    if (self.forms[id].getFormElement().tagName.toLowerCase() === 'table') {
+                        dataParent = event.srcElement.closest(self.forms[id].getFormElement().getAttribute('data-ui-element'));
+                    }
+
+                    self.submit(self.forms[id], null, dataParent);
+                }
+            });
+        }
     };
 
     bindButtons (id, e = null)
@@ -256,7 +280,7 @@ export class Form
      *
      * @since 1.0.0
      */
-    submit (form, button)
+    submit (form, button = null, container = null)
     {
         /* Handle injects */
         const self  = this,
@@ -273,7 +297,7 @@ export class Form
         if (!this.app.eventManager.isAttached(form.getId())) {
             this.app.eventManager.attach(form.getId(), function ()
             {
-                self.submitForm(form, action);
+                self.submitForm(form, action, container);
             }, true);
         }
 
@@ -313,9 +337,9 @@ export class Form
      *
      * @since 1.0.0
      */
-    submitForm (form, action = null)
+    submitForm (form, action = null, container = null)
     {
-        const data = form.getData();
+        const data = form.getData(container);
 
         if (!form.isValid(data)) {
             this.app.notifyManager.send(
@@ -468,7 +492,7 @@ export class Form
                 return;
             }
 
-            const formElement  = document.getElementById(id);
+            const formElement  = self.forms[id].getFormElement();
             const parents      = [];
             const selectors    = formElement.getAttribute('data-add-element').split(','),
                 selectorLength = selectors.length;
@@ -657,7 +681,7 @@ export class Form
     {
         const length = data.length;
         for (let i = 0; i < length; ++i) {
-            const matches = document.getElementById(formId).querySelectorAll('[data-tpl-' + type + '="' + data[i].getAttribute('data-tpl-' + type) + '"');
+            const matches = self.forms[formId].getFormElement().querySelectorAll('[data-tpl-' + type + '="' + data[i].getAttribute('data-tpl-' + type) + '"');
             const path    = data[i].hasAttribute('data-tpl-' + type + '-path') ? data[i].getAttribute('data-tpl-' + type + '-path') : null;
 
             const matchLength = matches.length;
@@ -709,7 +733,7 @@ export class Form
         const self = this;
 
         createForm.addEventListener('click', function () {
-            const formElement = document.getElementById(id);
+            const formElement = self.forms[id].getFormElement();
             const subMain     = formElement.getAttribute('data-add-content').charAt(0) === '#'
                 ? document.querySelector(formElement.getAttribute('data-add-content'))
                 : formElement.querySelector(formElement.getAttribute('data-add-content'));
@@ -746,7 +770,7 @@ export class Form
              *  The container element for inline adding isn't always tbody
              */
             self.app.uiManager.getFormManager().get(eleId + '-form').injectSubmit(function () {
-                document.getElementById(id).getElementsByTagName('tbody')[0].removeChild(
+                self.forms[id].getFormElement().getElementsByTagName('tbody')[0].removeChild(
                     document.getElementById(eleId)
                 );
             });
@@ -831,7 +855,7 @@ export class Form
         const self = this;
 
         update.addEventListener('click', function () {
-            const formElement  = document.getElementById(id);
+            const formElement  = self.forms[id].getFormElement();
             const parents      = [];
             const selectors    = formElement.getAttribute('data-update-element').split(','),
                 selectorLength = selectors.length;
@@ -1042,7 +1066,7 @@ export class Form
         const self = this;
 
         save.addEventListener('click', function () {
-            const formElement    = document.getElementById(id);
+            const formElement    = self.forms[id].getFormElement();
             const parentsTpl     = {};
             const parentsContent = {};
             const selectors      = formElement.getAttribute('data-update-element').split(','),
@@ -1284,13 +1308,13 @@ export class Form
         const self = this;
 
         update.addEventListener('click', function () {
-            const formElement = document.getElementById(id);
+            const formElement = self.forms[id].getFormElement();
             const parent      = this.closest(formElement.getAttribute('data-update-element'));
             const formId      = formElement.getAttribute('data-update-form');
             const values      = parent.querySelectorAll('[data-tpl-value]');
             const text        = parent.querySelectorAll('[data-tpl-text]');
 
-            const fields = document.getElementById(formId).querySelectorAll('[data-form="' + id + '"]');
+            const fields = self.forms[formId].getFormElement().querySelectorAll('[data-form="' + id + '"]');
             let length   = 0;
 
             // clear form values to prevent old values getting mixed with update values

Views/FormView.js

@@ -34,12 +34,14 @@ export class FormView
     {
         this.id = id;
 
-        this.initializeMembers();
-        this.bind();
-
         this.success    = null;
         this.finally    = null;
         this.lastSubmit = 0;
+
+        this.form = null;
+
+        this.initializeMembers();
+        this.bind();
     };
 
     /**
@@ -106,6 +108,13 @@ export class FormView
         this.lastSubmit = Math.floor(Date.now());
     };
 
+    isOnChange ()
+    {
+        const isOnChange = this.getFormElement().getAttribute('data-on-change');
+
+        return (isOnChange === 'true' || isOnChange === '1');
+    };
+
     /**
      * Get submit elements
      *
@@ -305,13 +314,15 @@ export class FormView
     /**
      * Get form elements
      *
+     * @param {object} container Data container, null = entire form or element e.g. table row
+     *
      * @return {Array}
      *
      * @since 1.0.0
      */
-    getFormElements ()
+    getFormElements (container = null)
     {
-        const form = document.getElementById(this.id);
+        const form = container === null ? this.getFormElement() : container;
 
         if (!form) {
             return [];
@@ -412,15 +423,17 @@ export class FormView
     /**
      * Get form data
      *
+     * @param {container} Data container. Null = entire form, container e.g. single row in a table
+     *
      * @return {FormData}
      *
      * @since 1.0.0
      */
-    getData ()
+    getData (container = null)
     {
         const data   = {},
             formData = new FormData(),
-            elements = this.getFormElements(),
+            elements = this.getFormElements(container),
             length   = elements.length;
 
         let value = null;
@@ -499,7 +512,7 @@ export class FormView
         const elements = this.getFormElements(),
             length     = elements.length;
 
-        const form = document.getElementById(this.id);
+        const form = this.getFormElement();
         form.reset();
 
         for (let i = 0; i < length; ++i) {
@@ -530,6 +543,11 @@ export class FormView
         return this.id;
     };
 
+    getFormElement ()
+    {
+        return this.form === null ? (this.form = document.getElementById(this.id)) : this.form;
+    };
+
     /**
      * Validate form
      *
@@ -591,18 +609,6 @@ export class FormView
         return invalid;
     }
 
-    /**
-     * Get form element
-     *
-     * @return {Object}
-     *
-     * @since 1.0.0
-     */
-    getElement ()
-    {
-        return document.getElementById(this.getId());
-    };
-
     /**
      * Get form element id
      *
@@ -648,7 +654,7 @@ export class FormView
     {
         this.clean();
 
-        const e = document.getElementById(this.id);
+        const e = this.getFormElement();
 
         if (!e) {
             return;