avalynx-form 1.0.2 → 1.0.3

package/README.md

@@ -42,7 +42,7 @@ Replace `path/to/avalynx-form.js` with the actual path to the file in your proje
 AvalynxForm is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/avalynx-form@1.0.2/dist/js/avalynx-form.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/avalynx-form@1.0.3/dist/js/avalynx-form.js"></script>
 ```
 
 Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxForm displays correctly.
@@ -108,7 +108,7 @@ Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxFo
 To use AvalynxForm in your project, include the AvalynxForm JavaScript file in your project and initialize the class with the appropriate selector.
 
 ```javascript
-new AvalynxForm("#myForm", {
+new AvalynxForm("myForm", {
     apiParams: {
         extraData1: 'value1',
         extraData2: 'value2'
@@ -132,6 +132,8 @@ AvalynxForm allows the following options for customization:
   - `loader`: (object) An instance of AvalynxLoader to use as the loader for the modal (default: `null`).
   - `onSuccess`: (function) A callback function to be executed when the form submission is successful (default: `null`).
   - `onError`: (function) A callback function to be executed when the form submission fails (default: `null`).
+  - `onBeforeSubmit`: (function) A callback function to be executed before the form submission (default: `null`).
+  - `onAfterSubmit`: (function) A callback function to be executed after the form submission (default: `null`).
 
 ## Contributing
 

package/dist/js/avalynx-form.esm.js

@@ -3,12 +3,12 @@
  *
  * AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
  *
- * @version 1.0.2
+ * @version 1.0.3
  * @license MIT
- * @author https://github.com/avalynx/avalynx-datatable/graphs/contributors
+ * @author https://github.com/avalynx/avalynx-form/graphs/contributors
  * @website https://github.com/avalynx/
- * @repository https://github.com/avalynx/avalynx-datatable.git
- * @bugs https://github.com/avalynx/avalynx-datatable/issues
+ * @repository https://github.com/avalynx/avalynx-form.git
+ * @bugs https://github.com/avalynx/avalynx-form/issues
  *
  * @param {string} id - The ID of the element to attach the form to.
  * @param {object} options - An object containing the following keys:
@@ -16,6 +16,8 @@
  * @param {object} options.loader - An instance of AvalynxLoader to use as the loader for the modal (default: `null`).
  * @param {function} options.onSuccess - A callback function to be executed when the form submission is successful (default: `null`).
  * @param {function} options.onError - A callback function to be executed when the form submission fails (default: `null`).
+ * @param {function} options.onBeforeSubmit - A callback function to be executed before the form submission (default: `null`).
+ * @param {function} options.onAfterSubmit - A callback function to be executed after the form submission (default: `null`).
  *
  */
 
@@ -37,6 +39,8 @@ export class AvalynxForm {
             loader: null,
             onSuccess: null,
             onError: null,
+            onBeforeSubmit: null,
+            onAfterSubmit: null,
             ...options
         };
         this.init();
@@ -55,6 +59,12 @@ export class AvalynxForm {
     }
 
     async sendAjaxRequest() {
+        if (this.options.onBeforeSubmit) {
+            const result = this.options.onBeforeSubmit(this.form);
+            if (result === false) {
+                return;
+            }
+        }
         const action = this.form.action;
         const method = this.form.method.toUpperCase();
 
@@ -81,6 +91,9 @@ export class AvalynxForm {
             this.handleResponse(result);
         } catch (error) {
             console.error('Error during AJAX request:', error);
+            if (this.options.onError) {
+                this.options.onError(error);
+            }
         } finally {
             if (this.options.loader === null) {
                 const overlay = document.getElementById(`${this.id}-overlay`);
@@ -90,6 +103,9 @@ export class AvalynxForm {
             } else {
                 this.options.loader.load = false;
             }
+            if (this.options.onAfterSubmit) {
+                this.options.onAfterSubmit(this.form);
+            }
         }
     }
 

package/dist/js/avalynx-form.js

@@ -3,12 +3,12 @@
  *
  * AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
  *
- * @version 1.0.2
+ * @version 1.0.3
  * @license MIT
- * @author https://github.com/avalynx/avalynx-datatable/graphs/contributors
+ * @author https://github.com/avalynx/avalynx-form/graphs/contributors
  * @website https://github.com/avalynx/
- * @repository https://github.com/avalynx/avalynx-datatable.git
- * @bugs https://github.com/avalynx/avalynx-datatable/issues
+ * @repository https://github.com/avalynx/avalynx-form.git
+ * @bugs https://github.com/avalynx/avalynx-form/issues
  *
  * @param {string} id - The ID of the element to attach the form to.
  * @param {object} options - An object containing the following keys:
@@ -16,6 +16,8 @@
  * @param {object} options.loader - An instance of AvalynxLoader to use as the loader for the modal (default: `null`).
  * @param {function} options.onSuccess - A callback function to be executed when the form submission is successful (default: `null`).
  * @param {function} options.onError - A callback function to be executed when the form submission fails (default: `null`).
+ * @param {function} options.onBeforeSubmit - A callback function to be executed before the form submission (default: `null`).
+ * @param {function} options.onAfterSubmit - A callback function to be executed after the form submission (default: `null`).
  *
  */
 
@@ -35,6 +37,8 @@ class AvalynxForm {
             loader: null,
             onSuccess: null,
             onError: null,
+            onBeforeSubmit: null,
+            onAfterSubmit: null,
             ...options
         };
         this.init();
@@ -53,6 +57,12 @@ class AvalynxForm {
     }
 
     async sendAjaxRequest() {
+        if (this.options.onBeforeSubmit) {
+            const result = this.options.onBeforeSubmit(this.form);
+            if (result === false) {
+                return;
+            }
+        }
         const action = this.form.action;
         const method = this.form.method.toUpperCase();
 
@@ -79,6 +89,9 @@ class AvalynxForm {
             this.handleResponse(result);
         } catch (error) {
             console.error('Error during AJAX request:', error);
+            if (this.options.onError) {
+                this.options.onError(error);
+            }
         } finally {
             if (this.options.loader === null) {
                 const overlay = document.getElementById(`${this.id}-overlay`);
@@ -88,6 +101,9 @@ class AvalynxForm {
             } else {
                 this.options.loader.load = false;
             }
+            if (this.options.onAfterSubmit) {
+                this.options.onAfterSubmit(this.form);
+            }
         }
     }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "avalynx-form",
   "title": "AvalynxForm",
   "description": "AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "license": "MIT",
   "main": "dist/js/avalynx-form.js",
   "module": "dist/js/avalynx-form.esm.js",