@stegopop/fetch-data-forms 1.0.0

package/.idea/jpa-buddy.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JpaBuddyIdeaProjectConfig">
+    <option name="renamerInitialized" value="true" />
+  </component>
+</project>

package/.idea/misc.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_11" default="true" project-jdk-name="11" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+  <component name="ProjectType">
+    <option name="id" value="jpab" />
+  </component>
+</project>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/snap-ajax-forms.iml" filepath="$PROJECT_DIR$/.idea/snap-ajax-forms.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/snap-ajax-forms.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

package/.swcrc

@@ -0,0 +1,21 @@
+{
+    "jsc": {
+      "parser": {
+        "syntax": "ecmascript",
+        "jsx": false
+      },
+      "loose": false,
+      "minify": {
+        "compress": false,
+        "mangle": false
+      }
+    },
+    "module": {
+      "type": "es6"
+    },
+    "minify": false,
+    "isModule": false,
+    "env": {
+      "targets": "IE 11"
+    }
+  }

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Nick Adams
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,219 @@
+# FetchDataForms
+
+[![npm version](https://badge.fury.io/js/@stegopop%2Fajaxy-forms.svg)](https://badge.fury.io/js/@stegopop%2Fajax-tap)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+Instantly turn an HTML form element into an AJAX request just by adding an attribute.
+
+## Dependencies
+
+Requires jQuery's AJAX.
+
+## Usage
+
+Make your web apps feel snappier by converting server-side requests into AJAX requests.  
+
+Instantiate FetchDataForms
+
+```
+new FetchDataForms();
+```
+
+Just add the `data-fetch` attribute to any form you'd like to convert.
+
+```html
+<form action="/url" method="POST" data-fetch>
+   ...
+</form>
+```
+
+## Install
+
+With NPM
+
+```markdown
+npm install @stegopop/data-fetch-forms
+```
+
+With a CDN
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@stegopop/data-fetch-forms"></script>
+```
+
+## Options
+
+Below are optional features that can be configured via an options object passed the the FetchDataForms constructor, or via data attributes.
+
+### Selector
+
+By default, any form with the `data-fetch` attribute will submit with FetchDataForms.
+
+You may modify this with a css style selector in the options object.
+
+```js
+new FetchDataForms({
+    select: "form.fetch"
+});
+```
+
+### reCAPTCHA
+
+*Note: FetchDataForms only supports reCAPTCHA v3.*
+
+Added Google reCAPTCHA to FetchDataForms is super simple. Just add a recaptcha object with a version and siteKey as in the options object.
+
+```html
+<script src="https://www.google.com/recaptcha/api.js?render=YourKeyHere11111111111111111111111111111"></script>
+<script>
+   new FetchDataForms({
+      recaptcha: {
+         version: "v3",
+         siteKey: "YourKeyHere11111111111111111111111111111"
+      },
+   });
+</script>
+```
+
+Then add the `data-fetch-recaptcha` attribute to any form you'd like to protect.
+
+```html
+<form action="/url" method="POST" data-fetch data-fetch-recaptcha>
+    ...
+</form>
+```
+
+*Note: This version of the Google reCAPTCHA is score-based. If you wanted to perform certain actions based on that score, 
+then pass the `score` from Google's Site Verify Response. You can access that in the form submit event, or the `done`, `always`, or `fail` callbacks.* 
+
+### Showing Errors
+
+Displaying errors in form inputs requires you to specify where you'd like the error to show. 
+
+Do that with the `data-fetch-errors` attribute.
+
+```html
+<form action="/url" method="POST" data-fetch>
+   
+    <label for="favorite_sandwich">
+        <input type="text" name="favorite_sandwich" id="favorite_sandwich" required>
+        <div data-fetch-errors="favorite_sandwich"></div>
+    </label>
+    
+</form>
+```
+
+Then when the server finds an error, return a JSON message with this format for errors.
+
+```json
+{
+    "errors": {
+        "favorite_sandwich": {
+            "messages": [
+                "This is the 'favorite_sandwich' error message.",
+                "There could multiple errors."
+            ]
+        }
+    }
+}
+```
+
+### Submission Events
+
+If you assign your form an id, then an event will be dispatched whenever your form is submitted.
+
+Whatever casing you use for your form id will be converted to kebab-casing for the event name. 
+
+*Example: `<form id="testForm">` requires listening like this `addEventListener("test-form-submit", function() { ... })`*
+
+```html
+<form id="fetch-example" action="/url" method="POST" data-fetch>
+    ...
+</form>
+
+<script>
+    document.querySelector("#fetch-example").addEventListener("fetch-example-submit", function(data) {
+        console.log("Recieved an event");
+    });
+</script>
+```
+
+### Callbacks
+
+Another way to call code after a submission is with the AJAX callback attributes.
+
+- done
+- fail
+- always
+- beforeSend
+
+Pass the name of a JavaScript function to the attribute.
+
+```html
+<form action="/url" method="POST" 
+      data-fetch 
+      data-fetch-done="doneCallbackExample"
+      data-fetch-fail="failCallbackExample"
+      data-fetch-always="alwaysCallbackExample"
+      data-fetch-before-send="beforeSendCallbackExample">
+    ...
+</form>
+```
+
+Pass the return data to your done callback function by adding a data argument to your function.
+
+```js
+function doneCallbackExample(data) {
+    ...
+}
+
+function failCallbackExample(data) {
+    ...
+}
+
+function alwaysCallbackExample(data) {
+    ...
+}
+
+function beforeSendCallbackExample() {
+    ...
+}
+```
+
+### Disable Submit Button Duration
+
+By default, the submission button for your form will be disabled for 1.5 seconds after submission to prevent multiple submissions.
+
+You modify this disabled duration by setting `submitDisabledDuration` in the options object passed to the FetchDataForms class.
+
+```js
+new FetchDataForms({
+    submitDisabledDuration: 3000
+});
+```
+
+Or you may disable it by setting the value to 0.
+
+### Multiple Submit Buttons
+
+You may add multiple submit buttons to your form. 
+
+Adding a name and value to your buttons will allow you see which submitter was pressed from the backend.
+
+Only the submitter element name and value will be submitted.
+
+Just like the browser default, if you press enter in your form, the first submit element will be the one that submits the form.
+
+### Development
+
+#### Compiling
+
+I've run into issues compiling this with babel, and moved to swc. Which I also had issues compiling locally.
+
+It does work in the playground though, so it's probably an issue with my node environment. 
+
+I'm not going to fix that right now. So if `npx swc` doesn't work, then manually paste the .swcrc json config here.
+
+https://swc.rs/playground
+
+And then copy and paste over the dist file.

package/index.js

@@ -0,0 +1,31 @@
+const server = require('server');
+const { get, post } = server.router;
+const cors = [
+    ctx => header("Access-Control-Allow-Origin", "*"),
+    ctx => header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"),
+    ctx => header("Access-Control-Allow-Methods", "GET, PUT, PATCH, POST, DELETE, HEAD"),
+    ctx => ctx.method.toLowerCase() === 'options' ? 200 : false,
+];
+
+const { header, render, redirect } = server.reply;
+
+const port = 3002;
+
+// Launch server with options and a couple of routes
+server({ port: port, security: false, views: './public' }, cors, [
+  get('/', () => render('./index.html')),
+  get('/db.json', () => render('./db.json')),
+  get('/db2.json', () => render('./db2.json')),
+  get('/test/get', ctx => {
+      console.log(ctx);
+      return ctx.query;
+      return 'ok';
+  }),
+  post('/test/post', ctx => {
+      console.log(ctx);
+      return {...ctx.data, ...ctx.files};
+      return 'ok';
+  }),
+]).then(async app => {
+    console.log(`Serving on: http://localhost:${port}`);
+});

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@stegopop/fetch-data-forms",
+  "version": "1.0.0",
+  "description": "Instantly turn an HTML form element into an asynchronous Fetch request by adding an attribute.",
+  "main": "dist/fetch-data-forms.min.js",
+  "scripts": {
+    "js": "babel public/src/FetchDataForms.js --out-file dist/fetch-data-forms.js",
+    "watch": "npm run js -- --watch",
+    "minify": "uglifyjs --compress --ie --comments --output dist/fetch-data-forms.min.js -- dist/fetch-data-forms.js",
+    "serve": "npx http-server -p 3001 --cors -c-1",
+    "test-api-server": "json-server --watch public/db.json",
+    "nothing-server": "node index.js",
+    "prep-release": "npm run js && npm run minify"
+  },
+  "author": "Nick Adams",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nickolasjadams/fetch-data-forms"
+  },
+  "keywords": [
+    "fetch",
+    "form",
+    "instant",
+    "browser",
+    "front-end"
+  ],
+  "devDependencies": {
+    "@babel/cli": "^7.24.5",
+    "@babel/core": "^7.24.5",
+    "@babel/node": "^7.23.9",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.24.5",
+    "@swc/cli": "^0.3.12",
+    "@swc/core": "^1.5.24",
+    "browserslist": "^4.23.0",
+    "http-server": "^14.1.1",
+    "json-server": "^0.17.3",
+    "server": "^1.0.38"
+  },
+  "dependencies": {
+    "tty": "^1.0.1",
+    "uglify-js": "^3.17.4"
+  }
+}

package/public/db2.json

@@ -0,0 +1,17 @@
+{
+    "success": false,
+    "errors": {
+        "hey": {
+            "messages": [
+                "This is the 'hey' error message.",
+                "There could be a second thing wrong."
+            ]
+        },
+        "world": {
+            "messages": [
+                "This is the 'world' error message.",
+                "There could be a second thing wrong."
+            ]
+        }
+    }
+}

package/public/dist/fetch-data-forms.js

@@ -0,0 +1,10 @@
+/**
+ * FetchDataForms.js
+ *
+ * Instantly turn html form elements into asynchronous fetch forms by adding an attribute.
+ * 
+ * @author Nick Adams
+ * @see {@link https://github.com/nickolasjadams/fetch-data-forms|Repository}
+ * @license MIT
+ * @version 1.0.0
+*/function _array_like_to_array(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}function _array_with_holes(e){if(Array.isArray(e))return e}function asyncGeneratorStep(e,t,r,n,a,o,i){try{var c=e[o](i),s=c.value}catch(e){r(e);return}c.done?t(s):Promise.resolve(s).then(n,a)}function _async_to_generator(e){return function(){var t=this,r=arguments;return new Promise(function(n,a){var o=e.apply(t,r);function i(e){asyncGeneratorStep(o,n,a,i,c,"next",e)}function c(e){asyncGeneratorStep(o,n,a,i,c,"throw",e)}i(void 0)})}}function _class_call_check(e,t){if(!(e instanceof t))throw TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function _create_class(e,t,r){return t&&_defineProperties(e.prototype,t),r&&_defineProperties(e,r),e}function _define_property(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _iterable_to_array_limit(e,t){var r,n,a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var o=[],i=!0,c=!1;try{for(a=a.call(e);!(i=(r=a.next()).done)&&(o.push(r.value),!t||o.length!==t);i=!0);}catch(e){c=!0,n=e}finally{try{i||null==a.return||a.return()}finally{if(c)throw n}}return o}}function _non_iterable_rest(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _object_spread(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),n.forEach(function(t){_define_property(e,t,r[t])})}return e}function _sliced_to_array(e,t){return _array_with_holes(e)||_iterable_to_array_limit(e,t)||_unsupported_iterable_to_array(e,t)||_non_iterable_rest()}function _type_of(e){return e&&"undefined"!=typeof Symbol&&e.constructor===Symbol?"symbol":typeof e}function _unsupported_iterable_to_array(e,t){if(e){if("string"==typeof e)return _array_like_to_array(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);if("Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return _array_like_to_array(e,t)}}function _ts_generator(e,t){var r,n,a,o,i={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]};return o={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function c(o){return function(c){return function(o){if(r)throw TypeError("Generator is already executing.");for(;i;)try{if(r=1,n&&(a=2&o[0]?n.return:o[0]?n.throw||((a=n.return)&&a.call(n),0):n.next)&&!(a=a.call(n,o[1])).done)return a;switch(n=0,a&&(o=[2&o[0],a.value]),o[0]){case 0:case 1:a=o;break;case 4:return i.label++,{value:o[1],done:!1};case 5:i.label++,n=o[1],o=[0];continue;case 7:o=i.ops.pop(),i.trys.pop();continue;default:if(!(a=(a=i.trys).length>0&&a[a.length-1])&&(6===o[0]||2===o[0])){i=0;continue}if(3===o[0]&&(!a||o[1]>a[0]&&o[1]<a[3])){i.label=o[1];break}if(6===o[0]&&i.label<a[1]){i.label=a[1],a=o;break}if(a&&i.label<a[2]){i.label=a[2],i.ops.push(o);break}a[2]&&i.ops.pop(),i.trys.pop();continue}o=t.call(e,i)}catch(e){o=[6,e],n=0}finally{r=a=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,c])}}}var FetchDataForms=function(){"use strict";function e(t){_class_call_check(this,e),this.selector="form[data-fetch]",this.submitDisabledDuration=1500,this.recaptcha={version:"v3"},this.onDone="",this.onFail="",this.onAlways="",this.onBeforeSend="",t&&(t.selector&&(this.selector=t.selector),t.submitDisabledDuration&&(this.submitDisabledDuration=t.submitDisabledDuration),t.recaptcha&&(this.recaptcha=_object_spread({},this.recaptcha,t.recaptcha),parseInt(this.recaptcha.version)?this.recaptcha.version="v"+this.recaptcha.version:this.recaptcha.version=this.recaptcha.version.toLowerCase(),"v3"!==this.recaptcha.version&&console.warn("Only reCAPTCHA v3 is supported at this time."),this.recaptcha.siteKey||console.warn("reCAPTCHA siteKey must be set."))),this.forms=document.querySelectorAll(this.selector),this.addFormEventListeners()}return _create_class(e,[{key:"addFormEventListeners",value:function(){var e=this;this.forms.forEach(function(t){t.addEventListener("submit",function(t){var r,n,a,o;t.preventDefault(),r=(o=_sliced_to_array(e.prepFormData(this,t),3))[0],n=o[1],a=o[2],""===r.dataset.fetchRecaptcha?void 0===window.grecaptcha?console.warn("reCAPTCHA objects couldn't be found. Have the scripts been loaded?"):window.grecaptcha.ready(function(){window.grecaptcha.execute(e.recaptcha.siteKey,{action:"submit"}).then(function(t){n.recaptcha_token=t,e.sendXhrRequest(r,n,a)})}):e.sendXhrRequest(r,n,a)},!1)})}},{key:"prepFormData",value:function(e,t){this.onDone=window[e.getAttribute("data-fetch-done")],this.onFail=window[e.getAttribute("data-fetch-fail")],this.onAlways=window[e.getAttribute("data-fetch-always")],this.onBeforeSend=window[e.getAttribute("data-fetch-before-send")];var r=t.submitter,n=new FormData(e,r);r&&(r.disabled="disabled");var a={},o=!0,i=!1,c=void 0;try{for(var s,l=n[Symbol.iterator]();!(o=(s=l.next()).done);o=!0){var u=_sliced_to_array(s.value,2),f=u[0];u[1];var h=document.querySelectorAll("[name='"+f+"']");if(h.length>1){var y="INPUT"===h[0].tagName&&"submit"===h[0].type||"BUTTON"===h[0].tagName&&"button"!==h[0].type,d="INPUT"===h[0].tagName&&"radio"===h[0].type;y?a[f]=n.get(f):d?a[f]=n.get(f):a[f]=n.getAll(f)}else{var p="SELECT"===h[0].tagName&&h[0].attributes.multiple,_="INPUT"===h[0].tagName&&"file"===h[0].type&&h[0].attributes.multiple;p||_?a[f]=n.getAll(f):a[f]=n.get(f)}}}catch(e){i=!0,c=e}finally{try{o||null==l.return||l.return()}finally{if(i)throw c}}var b=new FormData;return Object.entries(a).forEach(function(e){var t=_sliced_to_array(e,2),r=t[0],n=t[1];Array.isArray(n)?n.forEach(function(e){b.append(r,e)}):b.append(r,n)}),[e,b,r]}},{key:"sendXhrRequest",value:function(e,t,r){var n,a=this,o={method:e.method};if("GET"===e.method.toUpperCase()){var i=new URLSearchParams,c=!0,s=!1,l=void 0;try{for(var u,f=t.entries()[Symbol.iterator]();!(c=(u=f.next()).done);c=!0){var h=u.value;i.append(h[0],h[1])}}catch(e){s=!0,l=e}finally{try{c||null==f.return||f.return()}finally{if(s)throw l}}e.action+=(e.action.includes("?")?"&":"?")+i.toString()}else o.body=t;r&&(setTimeout(function(){r.removeAttribute("disabled")},a.submitDisabledDuration),"function"==typeof a.onBeforeSend&&a.onBeforeSend()),fetch(e.action,o).then((n=_async_to_generator(function(t){var r,n,o,i,c,s;return _ts_generator(this,function(l){switch(l.label){case 0:if(!t.ok)return[3,2];return[4,t.json()];case 1:return r=l.sent(),e.reset(),document.querySelectorAll("[data-fetch-errors]").forEach(function(e){e.innerHTML=""}),"function"==typeof a.onDone&&a.onDone(r),e.id&&(o=e.id.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_]+/g,"-").toLowerCase(),e.dispatchEvent(new CustomEvent(o+"-submit",{detail:r}))),i=r.errors||(null===(n=r.responseJSON)||void 0===n?void 0:n.errors),e.querySelectorAll("[data-fetch-errors]").forEach(function(e){e.innerHTML=""}),i&&Object.entries(i).forEach(function(t){var r=_sliced_to_array(t,2),n=r[0],a=r[1].messages,o=e.querySelector('[data-fetch-errors="'.concat(n,'"]'));o&&a.forEach(function(e){o.insertAdjacentHTML("afterbegin","<div>".concat(e,"</div>"))})}),"function"==typeof a.onFail&&a.onFail(r),[3,4];case 2:return[4,t.json()];case 3:s=(r=l.sent()).errors||(null===(c=r.responseJSON)||void 0===c?void 0:c.errors),e.querySelectorAll("[data-fetch-errors]").forEach(function(e){e.innerHTML=""}),s&&Object.entries(s).forEach(function(t){var r=_sliced_to_array(t,2),n=r[0],a=r[1].messages,o=e.querySelector('[data-fetch-errors="'.concat(n,'"]'));o&&a.forEach(function(e){o.insertAdjacentHTML("afterbegin","<div>".concat(e,"</div>"))})}),"function"==typeof a.onFail&&a.onFail(r),l.label=4;case 4:return[2,r]}})}),function(e){return n.apply(this,arguments)})).then(function(e){"function"==typeof a.onAlways&&a.onAlways(e)}).catch(function(e){"function"==typeof a.onFail&&a.onFail(e)})}},{key:"printFormData",value:function(e){var t=!0,r=!1,n=void 0;try{for(var a,o=e.entries()[Symbol.iterator]();!(t=(a=o.next()).done);t=!0){var i=a.value;"object"===_type_of(i[1])?(console.log(i[0]),console.log(i[1]),console.log(JSON.stringify(i[1],null,4))):console.log(i[0]+", "+i[1])}}catch(e){r=!0,n=e}finally{try{t||null==o.return||o.return()}finally{if(r)throw n}}}}]),e}();

package/public/src/FetchDataForms.js

@@ -0,0 +1,236 @@
+/**
+ * FetchDataForms.js
+ *
+ * Instantly turn html form elements into asynchronous fetch forms by adding an attribute.
+ * 
+ * @author Nick Adams
+ * @see {@link https://github.com/nickolasjadams/fetch-data-forms|Repository}
+ * @license MIT
+ * @version 1.0.0
+ */
+
+class FetchDataForms {
+    
+    constructor(options) {
+        this.selector = "form[data-fetch]";
+        this.submitDisabledDuration = 1500;
+        this.recaptcha = {
+            version: "v3"
+        };
+        this.onDone = "";
+        this.onFail = "";
+        this.onAlways = "";
+        this.onBeforeSend = "";
+        if (options) {
+            if (options.selector) {
+                this.selector = options.selector;
+            }
+            if (options.submitDisabledDuration) {
+                this.submitDisabledDuration = options.submitDisabledDuration;
+            }
+            if (options.recaptcha) {
+                this.recaptcha = { ...this.recaptcha, ...options.recaptcha };
+                if (parseInt(this.recaptcha.version)) {
+                    this.recaptcha.version = "v" + this.recaptcha.version;
+                } else {
+                    this.recaptcha.version = this.recaptcha.version.toLowerCase();
+                }
+                if (this.recaptcha.version !== "v3") {
+                    console.warn("Only reCAPTCHA v3 is supported at this time.");
+                }
+                if (!this.recaptcha.siteKey) {
+                    console.warn("reCAPTCHA siteKey must be set.")
+                }
+
+            }
+        }
+        this.forms = document.querySelectorAll(this.selector);
+        this.addFormEventListeners();
+    }
+
+    addFormEventListeners() {
+        let _this = this;
+        this.forms.forEach(function (form) {
+            form.addEventListener("submit", function(e) {
+                e.preventDefault();
+
+                let form, data, submitter;
+                [form, data, submitter] = _this.prepFormData(this, e);
+
+                // console.log(data);
+
+                if (form.dataset['fetchRecaptcha'] === '') {
+                    if (typeof window['grecaptcha'] === "undefined") {
+                        console.warn("reCAPTCHA objects couldn't be found. Have the scripts been loaded?");
+                    } else {
+                        window['grecaptcha'].ready(function() {
+                            window['grecaptcha'].execute(_this.recaptcha.siteKey, {action: 'submit'}).then(function(token) {
+                                data['recaptcha_token'] = token;
+                                _this.sendXhrRequest(form, data, submitter);
+                            });
+                        });
+                    }
+                } else {
+                    _this.sendXhrRequest(form, data, submitter);
+                }
+
+            }, false)
+        })
+    }
+
+    prepFormData(form, submissionEvent) {
+        this.onDone = window[form.getAttribute('data-fetch-done')];
+        this.onFail = window[form.getAttribute('data-fetch-fail')];
+        this.onAlways = window[form.getAttribute('data-fetch-always')];
+        this.onBeforeSend = window[form.getAttribute('data-fetch-before-send')];
+        let submitter = submissionEvent.submitter;
+        let formData = new FormData(form, submitter);
+        if (submitter) {
+            submitter.disabled = "disabled";
+        }
+
+        let data = {};
+        for (const [key, value] of formData) {
+            let formElements = document.querySelectorAll("[name='" + key + "']");
+            if (formElements.length > 1) { // multiple elements with the same 'name' attribute
+                let isSubmissionElement = (formElements[0].tagName === "INPUT" && formElements[0].type === "submit") || (formElements[0].tagName === "BUTTON" && formElements[0].type !== "button");
+                let isRadioElement = formElements[0].tagName === "INPUT" && formElements[0].type === "radio";
+                if (isSubmissionElement) { // Make scalar because only one element can submit the form
+                    data[key] = formData.get(key)
+                } else if (isRadioElement) { // Make scalar because only one item is selected
+                    data[key] = formData.get(key)
+                } else { // Make an array because this is assumed to be checkboxes
+                    data[key] = formData.getAll(key)
+                }
+            } else {
+                let isMultipleSelect = formElements[0].tagName === "SELECT" && formElements[0].attributes["multiple"]
+                let isMultipleFiles = formElements[0].tagName === "INPUT" && formElements[0].type === "file" && formElements[0].attributes["multiple"]
+                if (isMultipleSelect || isMultipleFiles) { // Make an array because multiple values are assumed available
+                    data[key] = formData.getAll(key)
+                } else {
+                    data[key] = formData.get(key)
+                }
+            }
+        }
+        let rData = new FormData();
+        Object.entries(data).forEach(([key, value]) => {
+
+            // arrays
+            if (Array.isArray(value)) {
+                // console.log("An array was submitted with this request.")
+                value.forEach(item => {
+                    rData.append(key, item);
+                    // console.log(item);
+                })
+            } else {
+                // everything else
+                rData.append(key, value);
+                // console.log(value);
+            }
+
+            // this.printFormData(rData);
+        });
+        return [ form, rData, submitter ];
+    }
+
+    sendXhrRequest(form, data, submitter) {
+        let _this = this;
+        // console.table(data);
+
+        let fetchOptions = {
+            method: form.method
+        }
+
+        if (form.method.toUpperCase() === "GET") {
+            const params = new URLSearchParams();
+            for (const pair of data.entries()) {
+                params.append(pair[0], pair[1]);
+            }
+            form.action += (form.action.includes('?') ? '&' : '?') + params.toString();
+        } else { // POST
+            fetchOptions.body = data;
+        }
+    
+        if (submitter) {
+            setTimeout(() => {
+                submitter.removeAttribute("disabled");
+            }, _this.submitDisabledDuration);
+            if (typeof _this.onBeforeSend === "function") _this.onBeforeSend();
+        }
+    
+        fetch(form.action, fetchOptions)
+            .then(async response => {
+                let responseData;
+                if (response.ok) {
+                    // console.log("OK")
+                    responseData = await response.json();
+                    form.reset();
+                    document.querySelectorAll("[data-fetch-errors]").forEach(element => {
+                        element.innerHTML = "";
+                    });
+                    if (typeof _this.onDone === "function") _this.onDone(responseData);
+                    if (form.id) {
+                        let id = form.id.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, '-').toLowerCase();
+                        form.dispatchEvent(new CustomEvent(id + "-submit", { detail: responseData }));
+                    }
+
+                    let errors = responseData.errors || responseData.responseJSON?.errors;
+                    form.querySelectorAll("[data-fetch-errors]").forEach(errorElement => {
+                        errorElement.innerHTML = "";
+                    });
+                    if (errors) {
+                        Object.entries(errors).forEach(([key, value]) => {
+                            let messages = value['messages'];
+                            let errorElement = form.querySelector(`[data-fetch-errors="${key}"]`);
+                            if (errorElement) {
+                                messages.forEach(message => {
+                                    errorElement.insertAdjacentHTML("afterbegin", `<div>${message}</div>`);
+                                });
+                            }
+                        });
+                    }
+                    if (typeof _this.onFail === "function") _this.onFail(responseData);
+                } else {
+                    responseData = await response.json();
+                    let errors = responseData.errors || responseData.responseJSON?.errors;
+                    form.querySelectorAll("[data-fetch-errors]").forEach(errorElement => {
+                        errorElement.innerHTML = "";
+                    });
+                    if (errors) {
+                        Object.entries(errors).forEach(([key, value]) => {
+                            let messages = value['messages'];
+                            let errorElement = form.querySelector(`[data-fetch-errors="${key}"]`);
+                            if (errorElement) {
+                                messages.forEach(message => {
+                                    errorElement.insertAdjacentHTML("afterbegin", `<div>${message}</div>`);
+                                });
+                            }
+                        });
+                    }
+                    if (typeof _this.onFail === "function") _this.onFail(responseData);
+                }
+                return responseData;
+            })
+            .then(data => {
+                // console.log(data);
+                if (typeof _this.onAlways === "function") _this.onAlways(data);
+            })
+            .catch(error => {
+                if (typeof _this.onFail === "function") _this.onFail(error);
+            });
+            
+    }
+
+    printFormData(formData) {
+        for (var pair of formData.entries()) {
+            if (typeof(pair[1]) === "object") {
+                console.log(pair[0]);
+                console.log(pair[1])
+                console.log(JSON.stringify(pair[1], null, 4))
+            } else {
+                console.log(pair[0]+ ', ' + pair[1]);
+            }
+        }
+    }
+
+}

package/spack.config.js

@@ -0,0 +1,12 @@
+const { config } = require("@swc/core/spack");
+
+module.exports = config({
+    entry: {
+        web: __dirname + "/public/src/FetchDataForms.js",
+    },
+    output: {
+        path: __dirname + "/public/dist",
+        name: "fetch-data-forms.js"
+    },
+    module: {},
+});