From 3ffd737a8cba8c183d9e5dde11a06882e900d42e Mon Sep 17 00:00:00 2001
From: Joaquim Nallar <jna@makina-corpus.com>
Date: Wed, 24 Jul 2024 16:16:23 +0200
Subject: [PATCH] fix: add contraint to click only once on create buttons

---
 CHANGES.md                                    |  3 +++
 mapentity/forms.py                            |  7 +++----
 mapentity/static/mapentity/mapentity.forms.js | 15 +++++++++++++++
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index e0f9034b7..d338c6f3c 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -4,6 +4,9 @@ CHANGELOG
 8.9.2+dev  (XXXX-XX-XX)
 -----------------------
 
+**Bug fixes**
+
+- Add contraint to click only once on create buttons
 
 
 8.9.2      (2024-07-15)
diff --git a/mapentity/forms.py b/mapentity/forms.py
index d5ded3718..aad0ba987 100644
--- a/mapentity/forms.py
+++ b/mapentity/forms.py
@@ -86,10 +86,9 @@ class SubmitButton(HTML):
 
     def __init__(self, div_id, label):
         content = ("""
-            <a id="{0}" class="btn btn-success"
-               onclick="javascript:$(this).parents('form').submit();">
+            <button type="submit" id="{0}" class="btn btn-success">
                 <i class="bi bi-check-circle-fill"></i> {1}
-            </a>""".format(div_id, label))
+            </button>""".format(div_id, label))
         super().__init__(content)
 
 
@@ -226,7 +225,7 @@ def _init_layout(self):
 
         # Main form layout
         self.helper.help_text_inline = True
-        self.helper.form_class = 'form-horizontal'
+        self.helper.form_class = 'form-horizontal mapentity-form'
         self.helper.form_style = "default"
         self.helper.label_class = 'col-md-3'
         self.helper.field_class = 'controls col-md-9'
diff --git a/mapentity/static/mapentity/mapentity.forms.js b/mapentity/static/mapentity/mapentity.forms.js
index 36241e22b..1d8d82ac9 100644
--- a/mapentity/static/mapentity/mapentity.forms.js
+++ b/mapentity/static/mapentity/mapentity.forms.js
@@ -1,5 +1,20 @@
 if (!window.MapEntity) window.MapEntity = {};
 
+// Disable button if submit event on form
+Array.from(document.getElementsByClassName("mapentity-form")).forEach(function (formElement) {
+
+    var submitButtonElement = formElement.querySelector("button[type=submit]")
+    submitButtonElement.removeAttribute("disabled")
+
+    formElement.addEventListener('submit', function () {
+        submitButtonElement.setAttribute("disabled", true)
+        // setTimeout in case of browser back page button click, to remove the persistent disabled attribute on button.
+        setTimeout(function () {
+            submitButtonElement.removeAttribute("disabled")
+        }, 2000)
+    }, false)
+});
+
 MapEntity.GeometryField = L.GeometryField.extend({
 
     initialize: function () {