diff --git a/app/webpacker/controllers/unsaved_changes_controller.js b/app/webpacker/controllers/unsaved_changes_controller.js
index fca6da9f45..c458921065 100644
--- a/app/webpacker/controllers/unsaved_changes_controller.js
+++ b/app/webpacker/controllers/unsaved_changes_controller.js
@@ -16,8 +16,19 @@ import { Controller } from "stimulus";
 // You can also combine the two actions
 //
 export default class extends Controller {
+  connect() {
+    // disable submit button when first loading the page
+    if (!this.isFormChanged()) {
+      this.disableButtons();
+    }
+  }
+
   formIsChanged(event) {
-    this.setChanged("true");
+    // We only do something if the form hasn't already been changed
+    if (!this.isFormChanged()) {
+      this.setChanged("true");
+      this.enableButtons();
+    }
   }
 
   leavingPage(event) {
@@ -51,4 +62,20 @@ export default class extends Controller {
   isFormChanged() {
     return this.data.get("changed") == "true";
   }
+
+  enableButtons() {
+    this.submitButtons().forEach((button) => {
+      button.disabled = false;
+    });
+  }
+
+  disableButtons() {
+    this.submitButtons().forEach((button) => {
+      button.disabled = true;
+    });
+  }
+
+  submitButtons() {
+    return this.element.querySelectorAll("input[type='submit']");
+  }
 }
diff --git a/spec/javascripts/stimulus/unsaved_changes_controller_test.js b/spec/javascripts/stimulus/unsaved_changes_controller_test.js
index 6b5ca0c707..b5748066c9 100644
--- a/spec/javascripts/stimulus/unsaved_changes_controller_test.js
+++ b/spec/javascripts/stimulus/unsaved_changes_controller_test.js
@@ -14,23 +14,37 @@ describe("UnsavedChangesController", () => {
   beforeEach(() => {
     document.body.innerHTML = `
       <form id="test-form" data-controller="unsaved-changes" data-action="beforeunload@window->unsaved-changes#leavingPage turbolinks:before-visit@window->unsaved-changes#leavingPage" data-unsaved-changes-changed="false">
-        <input
-          id="test-checkbox"
-          type="checkbox"
-          data-action="change->unsaved-changes#formIsChanged">
+        <input id="test-checkbox" type="checkbox" data-action="change->unsaved-changes#formIsChanged"/>
+        <input id="test-submit" type="submit"/>
       </form>
     `
   })
 
+  describe("#connect", () => {
+    it("disables any submit button", () => {
+      const submit = document.getElementById("test-submit")
+
+      expect(submit.disabled).toBe(true)
+    })  
+  })
+
   describe("#formIsChanged", () => {
     it("changed is set to true", () => {
-      const form = document.getElementById("test-form")
       const checkbox = document.getElementById("test-checkbox")
+      const form = document.getElementById("test-form")
 
       checkbox.click()
 
-      expect(form.dataset.unsavedChangesChanged).toBe('true')
+      expect(form.dataset.unsavedChangesChanged).toBe("true")
+    })
 
+    it("enables any submit button", () => {
+      const checkbox = document.getElementById("test-checkbox")
+      const submit = document.getElementById("test-submit")
+
+      checkbox.click()
+
+      expect(submit.disabled).toBe(false)
     })
   })