Improve unsaved-changes controller

app/javascript/controllers/unsaved_changes_controller.js

@@ -2,29 +2,25 @@ import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="unsaved-changes"
 export default class extends Controller {
-  changed = false
-  
+  originalFormData = null
+
   connect() {
-    window.addEventListener("beforeunload", (event) => {
-      this.leavingPage(event);
-    });  
-    document.addEventListener('turbo:before-visit', (event) => {
-      this.leavingPage(event);
-    });
-    this.element.addEventListener("submit", (_) => {
-      this.changed = false
-    })
-    this.element.addEventListener("change", (_) => {
-      this.changed = true
-    })
+    this.originalFormData = this.formState()
+
+    window.addEventListener("beforeunload", (event) => this.leavingPage(event))
+    document.addEventListener('turbo:before-visit', (e) => this.leavingPage(e));
+    this.element.addEventListener("submit", _ => this.originalFormData = this.formState())
   } 
+
+  formState() {
+    return JSON.stringify(new FormData(this.element).values().toArray().filter(x => x != ""))
+  }
   
   leavingPage(event) {
-    if(!this.changed) {
+    if(this.originalFormData == this.formState()) {
       return
     }
 
-    console.log("leavingPage", this.changed)
     if (event.type == "turbo:before-visit") {
       if (!window.confirm("Es gibt ungespeicherte Änderungen! Wirklich verlassen?")) { 
         event.preventDefault()