entry.html

@@ -2263,15 +2263,17 @@
         </div>
 
 
-        <div class="row pt-5">
-            <button class="btn btn-primary btn-lg btn-block" type="submit" id="submit-button" formaction="https://sfb1451.inm7.de/store-data" formmethod="post" disabled>Daten speichern</button>
-        </div>
-
         <div class="row pt-5">
             <!-- Eine lokale Kopie der Formulardaten speichern -->
             <button class="btn btn-primary btn-lg btn-block" type="button" id="local-save-button">Daten lokal speichern</button>
         </div>
 
+
+        <div class="row pt-5">
+            <button class="btn btn-primary btn-lg btn-block" type="submit" id="submit-button" formaction="https://sfb1451.inm7.de/store-data" formmethod="post" disabled>Daten speichern</button>
+        </div>
+
+
         <div class="row pt-5">
             <!-- Eine lokale Kopie der Formulardaten laden -->
             <input type="file" id="local-load-input" accept=".json" style="display:none">
@@ -2338,6 +2340,38 @@
 </script>
 
 
+<script>
+    const submitButtonUpdater = {
+        // a global object to track whether the save button can be enabled
+        // and to toggle its state when needed
+        // we require data to be validated and only allow submitting after
+        // the local save has been done
+        dataValid: false,
+        dataSaved: false,
+        update: function () {
+            let submitButton = document.getElementById("submit-button");
+            if (this.dataValid && this.dataSaved) {
+                submitButton.removeAttribute("disabled");
+            } else {
+                submitButton.setAttribute("disabled", "");
+            }
+        },
+        setAndUpdate: function (property, value) {
+            console.assert(
+                typeof value === "boolean",
+                "setAndUpdate called with non-boolean value"
+            );
+            console.assert(
+                this.hasOwnProperty(property),
+                "Unknown property: " + property
+            );
+            this[property] = value;
+            this.update();
+        },
+    };
+</script>
+
+
 <script>
     function getContentOfElementNamed(name) {
         const elementArray = document.getElementsByName(name);
@@ -2822,14 +2856,13 @@
     function updateFingerPrint() {
         let fingerPrintElement = document.getElementById("finger-print");
         let entryForm = document.getElementById("entry-form");
-        let submitButton = document.getElementById("submit-button");
         let hashedStringElement = document.getElementById("hashed-string");
         let hashValueElement = document.getElementById("hash-value");
         let signatureDataElement = document.getElementById("signature-data");
 
         if (validateForm(entryForm) === false) {
             fingerPrintElement.innerHTML = "Fingerabruck nicht verfügbar, da Eingaben ungültig sind.";
-            submitButton.setAttribute("disabled", "");
+            submitButtonUpdater.setAndUpdate("dataValid", false)
             signatureDataElement.setAttribute("disabled", "");
         } else {
             const contentString = getContentString();
@@ -2839,11 +2872,11 @@
                 console.log(hashHex);
                 fingerPrintElement.innerHTML = hashHex;
                 hashValueElement.value = hashHex;
-                submitButton.removeAttribute("disabled");
+                submitButtonUpdater.setAndUpdate("dataValid", true)
             }).catch(err => {
                 console.log(err);
                 fingerPrintElement.innerHTML = "Fingerabruck nicht verfügbar: " + err;
-                submitButton.setAttribute("disabled", "");
+                submitButtonUpdater.setAndUpdate("dataValid", false)
             });
         }
     }
@@ -3120,6 +3153,9 @@
         a.setAttribute("href", URL.createObjectURL(bb));
         a.click();
         a.remove();
+
+        // allow submit button to be enabled
+        submitButtonUpdater.setAndUpdate("dataSaved", true);
         return false;
     };
 </script>