Update form_wrapper template

contao-thememanager · Jun 26, 2024 · 88e6145 · 88e6145
1 parent 746d31a
commit 88e6145
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 9 deletions.
diff --git a/contao/templates/forms/form_wrapper.html5 b/contao/templates/forms/form_wrapper.html5
@@ -38,7 +38,7 @@
 <!-- indexer::continue -->
 
 <?php if ($this->ajax): ?>
-  <script>
+  <script<?= $this->attr()->setIfExists('nonce', $this->nonce('script-src')) ?>>
     window.addEventListener('DOMContentLoaded', () => {
       const el = document.querySelector('[data-ajax-form="<?= $this->id ?>"]');
 
@@ -75,7 +75,11 @@
 
           // Send the triggered button data as well
           if (e.submitter) {
-              formData.append(e.submitter.name, e.submitter.value);
+            formData.append(e.submitter.name, e.submitter.value);
+
+            // Prevent double form submission
+            e.submitter.disabled = true;
+            setTimeout(() => e.submitter.disabled = false, 30000);
           }
 
           request(form, formData, xhr => {
@@ -87,10 +91,10 @@
               return;
             }
 
-            const template = document.createElement('template');
-            template.innerHTML = xhr.responseText.trim();
+            const range = document.createRange();
+            range.selectNode(form.parentNode);
 
-            const newForm = template.content.firstElementChild;
+            const newForm = range.createContextualFragment(xhr.responseText).firstElementChild;
             form.replaceWith(newForm);
 
             if (!newForm.getAttribute('action')) {
@@ -105,4 +109,14 @@
       initForm(el);
     });
   </script>
+<?php else: ?>
+  <script<?= $this->attr()->setIfExists('nonce', $this->nonce('script-src')) ?>>
+    document.currentScript.previousElementSibling.querySelector('form').addEventListener('submit', e => {
+      // Prevent double form submission
+      if (e.submitter) {
+        e.submitter.disabled = true;
+        setTimeout(() => e.submitter.disabled = false, 30000);
+      }
+    });
+  </script>
 <?php endif; ?>
diff --git a/contao/templates/forms/form_wrapper_contao5_default.html5 b/contao/templates/forms/form_wrapper_contao5_default.html5
@@ -15,7 +15,7 @@
 <!-- indexer::continue -->
 
 <?php if ($this->ajax): ?>
-  <script>
+  <script<?= $this->attr()->setIfExists('nonce', $this->nonce('script-src')) ?>>
     window.addEventListener('DOMContentLoaded', () => {
       const el = document.querySelector('[data-ajax-form="<?= $this->id ?>"]');
 
@@ -53,6 +53,10 @@
           // Send the triggered button data as well
           if (e.submitter) {
             formData.append(e.submitter.name, e.submitter.value);
+
+            // Prevent double form submission
+            e.submitter.disabled = true;
+            setTimeout(() => e.submitter.disabled = false, 30000);
           }
 
           request(form, formData, xhr => {
@@ -64,10 +68,10 @@
               return;
             }
 
-            const template = document.createElement('template');
-            template.innerHTML = xhr.responseText.trim();
+            const range = document.createRange();
+            range.selectNode(form.parentNode);
 
-            const newForm = template.content.firstElementChild;
+            const newForm = range.createContextualFragment(xhr.responseText).firstElementChild;
             form.replaceWith(newForm);
 
             if (!newForm.getAttribute('action')) {
@@ -82,4 +86,14 @@
       initForm(el);
     });
   </script>
+<?php else: ?>
+  <script<?= $this->attr()->setIfExists('nonce', $this->nonce('script-src')) ?>>
+    document.currentScript.previousElementSibling.querySelector('form').addEventListener('submit', e => {
+      // Prevent double form submission
+      if (e.submitter) {
+        e.submitter.disabled = true;
+        setTimeout(() => e.submitter.disabled = false, 30000);
+      }
+    });
+  </script>
 <?php endif; ?>