account save disable

Author: maartenwebsitebezorgd

assets/css/ledenportaal.css

@@ -293,6 +293,13 @@
     box-shadow: 0 0 0 3px rgba(0, 145, 213, 0.4);
 }
 
+.lp-knop:disabled {
+    background-color: #b0d4ea;
+    border-color: #b0d4ea;
+    cursor: not-allowed;
+    opacity: 0.7;
+}
+
 /* ==========================================================================
    Links
    ========================================================================== */

templates/account-form.php

@@ -291,7 +291,7 @@
             </p>
         <?php endif; ?>
         <div class="lp-form-groep lp-form-groep--acties">
-            <button type="submit" name="lp_account_submit" class="lp-knop">
+            <button type="submit" name="lp_account_submit" class="lp-knop" id="lp-opslaan-knop" disabled>
                 <?php esc_html_e( 'Wijzigingen opslaan', 'mijn-ledenportaal' ); ?>
             </button>
             <a href="<?php echo esc_url( lp_uitlog_url() ); ?>" class="lp-link lp-link--uitloggen">
@@ -302,6 +302,7 @@
     </form>
     <script>
     (function() {
+        // IBAN match check
         var iban1 = document.getElementById('lp-iban');
         var iban2 = document.getElementById('lp-iban2');
         var melding = iban2 ? iban2.closest('.lp-form-groep').querySelector('.lp-iban-match-melding') : null;
@@ -311,6 +312,34 @@ function checkIban() {
         }
         if (iban1) iban1.addEventListener('input', checkIban);
         if (iban2) iban2.addEventListener('input', checkIban);
+
+        // Knop inschakelen bij wijziging
+        var form  = document.getElementById('lp-account-form');
+        var knop  = document.getElementById('lp-opslaan-knop');
+        if (!form || !knop) return;
+
+        var snapshot = {};
+        form.querySelectorAll('input:not([disabled]), select, textarea').forEach(function(el) {
+            var key = el.name + '||' + el.type;
+            if (el.type === 'checkbox' || el.type === 'radio') {
+                snapshot[key] = el.checked;
+            } else {
+                snapshot[key] = el.value;
+            }
+        });
+
+        function isGewijzigd() {
+            var gewijzigd = false;
+            form.querySelectorAll('input:not([disabled]), select, textarea').forEach(function(el) {
+                var key = el.name + '||' + el.type;
+                var huidig = (el.type === 'checkbox' || el.type === 'radio') ? el.checked : el.value;
+                if (snapshot[key] !== huidig) gewijzigd = true;
+            });
+            return gewijzigd;
+        }
+
+        form.addEventListener('input', function() { knop.disabled = !isGewijzigd(); });
+        form.addEventListener('change', function() { knop.disabled = !isGewijzigd(); });
     })();
     </script>