Block inflight form re-submission from all sources

Disabling button only blocks the button, not form inputs

diff --git a/index.html b/index.html
index ee64818e40252df0edc71481dcdf8dc7fe449e1e..1040d09f2520673c7c99d206f41ecec4fc7a2c87 100644 (file)
--- a/index.html
+++ b/index.html
@@ -73,16 +73,21 @@
       transition: filter 600ms;
     }
 
-    button:disabled {
+    [data-submitting] button {
       cursor: not-allowed;
       border: 1px solid hsl(216deg 70% 75%);
     }
 
-    :is(input, output, button:not(:disabled)):is(:hover, :focus-within) {
+    :is(input, output, button):is(:hover, :focus-within) {
       filter: drop-shadow(0 0 2px hsl(216deg 70% 50%));
       transition: filter 200ms;
     }
 
+    [data-submitting] button:is(:hover, :focus-within) {
+      filter: unset;
+      transition: unset;
+    }
+
     output {
       font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
       box-sizing: border-box;
@@ -261,23 +266,26 @@
     document.querySelector('form').addEventListener('submit', async e => {
       e.preventDefault();
 
+      if (e.target.hasAttribute('data-submitting')) {
+        return;
+      }
+      e.target.setAttribute('data-submitting', '');
+      spinner.style.setProperty('visibility', 'visible');
+
       const data = new FormData(e.target);
       const address = data.get('address');
       const rpc = new URL(data.get('rpc'));
       const ipfs = new URL(data.get('ipfs'));
       const result = e.target.elements['result'];
 
-      button.disabled = true;
-      spinner.style.setProperty('visibility', 'visible');
-
       // Reset the output, if there were previous runs
       result.innerHTML = '';
       result.style.setProperty('visibility', 'visible');
 
       await handleData(address, rpc, ipfs, result);
 
-      button.disabled = false;
       spinner.style.setProperty('visibility', 'hidden');
+      e.target.removeAttribute('data-submitting');
     });
   </script>
 </body>