diff --git a/app/views/admin/order_cycles/checkout_options.html.haml b/app/views/admin/order_cycles/checkout_options.html.haml
index 4bbe6d59d8..80d58be8c6 100644
--- a/app/views/admin/order_cycles/checkout_options.html.haml
+++ b/app/views/admin/order_cycles/checkout_options.html.haml
@@ -3,7 +3,7 @@
 - content_for :page_title do
   = t :edit_order_cycle
 
-= form_for [main_app, :admin, @order_cycle], html: { class: "order_cycle" , data: { controller: 'unsaved-changes', action: 'unsaved-changes#submit beforeunload@window->unsaved-changes#leavingPage', 'unsaved-changes-changed': "false" } } do |f|
+= form_for [main_app, :admin, @order_cycle], html: { class: "order_cycle" , data: { controller: 'unsaved-changes', action: 'beforeunload@window->unsaved-changes#leavingPage', 'unsaved-changes-changed': "false" } } do |f|
   = render 'wizard_progress'
 
   %fieldset.no-border-bottom
diff --git a/app/webpacker/controllers/unsaved_changes_controller.js b/app/webpacker/controllers/unsaved_changes_controller.js
index 5381c06368..afdb7ea8eb 100644
--- a/app/webpacker/controllers/unsaved_changes_controller.js
+++ b/app/webpacker/controllers/unsaved_changes_controller.js
@@ -6,7 +6,7 @@ import { Controller } from "stimulus";
 // - with beforeunload event :
 //    <form
 //      data-controller="unsaved-changes"
-//      data-action="unsaved-changes#submit beforeunload@window->unsaved-changes#leavingPage"
+//      data-action="beforeunload@window->unsaved-changes#leavingPage"
 //      data-unsaved-changes-changed="true"
 //    >
 //      <input data-action="change->unsaved-changes#formIsChanged" />
@@ -15,7 +15,7 @@ import { Controller } from "stimulus";
 // - with turbolinks :
 //    <form
 //      data-controller="unsaved-changes"
-//      data-action="unsaved-changes#submit turbolinks:before-visit@window->unsaved-changes#leavingPage"
+//      data-action="turbolinks:before-visit@window->unsaved-changes#leavingPage"
 //      data-unsaved-changes-changed="true"
 //    >
 //      <input data-action="change->unsaved-changes#formIsChanged" />
@@ -24,11 +24,11 @@ import { Controller } from "stimulus";
 // You can also combine the two event trigger ie :
 //    <form
 //      data-controller="unsaved-changes"
-//      data-action="unsaved-changes#submit beforeunload@window->unsaved-changes#leavingPage turbolinks:before-visit@window->unsaved-changes#leavingPage"
+//      data-action="beforeunload@window->unsaved-changes#leavingPage turbolinks:before-visit@window->unsaved-changes#leavingPage"
 //      data-unsaved-changes-changed="true"
 //    >
 //
-// Optional, you can add 'data-unsaved-changes-changed="true"' if you want to disable all
+// Optional, you can add 'data-unsaved-changes-disable-submit-button="true"' if you want to disable all
 // submit buttons when the form hasn't been interacted with
 //
 export default class extends Controller {
@@ -40,6 +40,8 @@ export default class extends Controller {
         input.addEventListener("change", this.formIsChanged.bind(this));
       });
 
+    this.element.addEventListener("submit", this.handleSubmit.bind(this));
+
     // disable submit button when first loading the page
     if (!this.isFormChanged() && this.isSubmitButtonDisabled()) {
       this.disableButtons();
@@ -81,7 +83,7 @@ export default class extends Controller {
     }
   }
 
-  submit(event) {
+  handleSubmit(event) {
     // if we are submitting the form, we don't want to trigger a warning so set changed to false
     this.setChanged("false");
   }
diff --git a/spec/javascripts/stimulus/unsaved_changes_controller_test.js b/spec/javascripts/stimulus/unsaved_changes_controller_test.js
index c70b77a9e9..9379c3745d 100644
--- a/spec/javascripts/stimulus/unsaved_changes_controller_test.js
+++ b/spec/javascripts/stimulus/unsaved_changes_controller_test.js
@@ -16,7 +16,7 @@ describe("UnsavedChangesController", () => {
       <form 
         id="test-form" 
         data-controller="unsaved-changes" 
-        data-action="unsaved-changes#submit beforeunload@window->unsaved-changes#leavingPage turbolinks:before-visit@window->unsaved-changes#leavingPage" 
+        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" />
@@ -32,7 +32,7 @@ describe("UnsavedChangesController", () => {
           <form 
             id="test-form" 
             data-controller="unsaved-changes" 
-            data-action="unsaved-changes#submit beforeunload@window->unsaved-changes#leavingPage turbolinks:before-visit@window->unsaved-changes#leavingPage" 
+            data-action="beforeunload@window->unsaved-changes#leavingPage turbolinks:before-visit@window->unsaved-changes#leavingPage" 
             data-unsaved-changes-changed="false" 
             data-unsaved-changes-disable-submit-button="true"
           >
@@ -55,7 +55,7 @@ describe("UnsavedChangesController", () => {
           <form 
             id="test-form" 
             data-controller="unsaved-changes" 
-            data-action="unsaved-changes#submit beforeunload@window->unsaved-changes#leavingPage turbolinks:before-visit@window->unsaved-changes#leavingPage" 
+            data-action="beforeunload@window->unsaved-changes#leavingPage turbolinks:before-visit@window->unsaved-changes#leavingPage" 
             data-unsaved-changes-changed="false" 
             data-unsaved-changes-disable-submit-button="false"
           >
@@ -195,7 +195,7 @@ describe("UnsavedChangesController", () => {
     })
   })
 
-  describe('#submit', () => {
+  describe('#handleSubmit', () => {
     let checkbox
 
     beforeEach(() => {