Support submit button INPUT type

Added ability to override button
nuxy · Apr 19, 2024 · c3ab49b · c3ab49b
1 parent 0136fa7
commit c3ab49b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -68,6 +68,7 @@ const webformToolkit = new WebformToolkit(container, settings, callback);
 const settings = {
   action: 'https://www.domain.com/handler',
   params: 'name1=value1&name2=value2',
+  submit: false, // Override submit button creation.
   groups: [
     {
       legend: 'Login Form',
@@ -110,7 +111,7 @@ const webformToolkit = new WebformToolkit(container, settings, callback);
 
 ## Supported types
 
-[checkbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox), [color](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color), [date](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date), [email](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email), [file](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file), [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden), [number](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number), [password](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password), [quantity](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/quantity), [radio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio), [range](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range), [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select), [text](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text), [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea), [time](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time)
+[checkbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox), [color](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color), [date](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date), [email](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email), [file](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file), [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden), [number](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number), [password](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password), [quantity](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/quantity), [radio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio), [range](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range), [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select), [submit](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit), [text](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text), [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea), [time](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time)
 
 ## Field definitions
 

diff --git a/src/webform-toolkit.js b/src/webform-toolkit.js
@@ -99,37 +99,36 @@ function WebformToolkit(container, settings, callback) {
     }
 
     // Create submit button.
-    const div = document.createElement('div');
-    div.classList.add('form-submit');
+    if (settings?.submit !== false) {
+      const div = document.createElement('div');
+      div.classList.add('form-submit');
+
+      const button = document.createElement('input');
+      button.setAttribute('type',  'submit');
+      button.setAttribute('value', 'Submit');
+
+      div.appendChild(button);
 
-    const button = document.createElement('input');
-    button.setAttribute('type',  'submit');
-    button.setAttribute('value', 'Submit');
+      form.appendChild(div);
+    }
 
     // Bind form submit event.
     form.addEventListener('submit', function(event) {
       event.preventDefault();
 
-      if (!checkErrorsExist(form)) {
-
-        // Return callback with form object response.
-        if (typeof callback === 'function') {
-          var formData = new FormData(form);
+      if (checkErrorsExist(form)) { return }
 
-          // Output as object.
-          callback(Object.fromEntries(formData));
-        }
+      // Return callback with form object response.
+      if (typeof callback === 'function') {
+        callback(Object.fromEntries(new FormData(form)));
+      }
 
-        // POST form values.
-        else {
-          self.submit();
-        }
+      // POST form values.
+      else {
+        self.submit();
       }
     });
 
-    div.appendChild(button);
-
-    form.appendChild(div);
     return form;
   }
 
@@ -157,6 +156,7 @@ function WebformToolkit(container, settings, callback) {
       case 'password':
       case 'quantity':
       case 'range':
+      case 'submit':
       case 'text':
       case 'time':
         elm = createInputElm(config);