diff --git a/app/views/admin/order_cycles/checkout_options.html.haml b/app/views/admin/order_cycles/checkout_options.html.haml
index cfd7926990..4bbe6d59d8 100644
--- a/app/views/admin/order_cycles/checkout_options.html.haml
+++ b/app/views/admin/order_cycles/checkout_options.html.haml
@@ -4,7 +4,6 @@
   = 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|
-
   = render 'wizard_progress'
 
   %fieldset.no-border-bottom
@@ -26,7 +25,7 @@
               %td.text-center
                 - if distributor_shipping_methods.many?
                   %label
-                    = check_box_tag nil, nil, nil, { "data-action": "change->select-all#toggleAll change->unsaved-changes#formIsChanged", "data-select-all-target": "all" }
+                    = check_box_tag nil, nil, nil, { "data-action": "change->select-all#toggleAll", "data-select-all-target": "all" }
                     = t(".select_all")
               %td
                 %em= distributor.name
@@ -37,7 +36,7 @@
                           distributor_shipping_method.id,
                           @order_cycle.distributor_shipping_methods.include?(distributor_shipping_method),
                           id: "order_cycle_selected_distributor_shipping_method_ids_#{distributor_shipping_method.id}",
-                          data: ({ "action" => "change->select-all#toggleCheckbox change->unsaved-changes#formIsChanged", "select-all-target" => "checkbox" } if distributor_shipping_method.shipping_method.frontend?)
+                          data: ({ "action" => "change->select-all#toggleCheckbox", "select-all-target" => "checkbox" } if distributor_shipping_method.shipping_method.frontend?)
                       = distributor_shipping_method.shipping_method.name
                 - distributor.shipping_methods.backend.each do |shipping_method|
                   %label.disabled
@@ -57,7 +56,7 @@
               %td.text-center
                 - if distributor_payment_methods.many?
                   %label
-                    = check_box_tag nil, nil, nil, { "data-action": "change->select-all#toggleAll change->unsaved-changes#formIsChanged", "data-select-all-target": "all" }
+                    = check_box_tag nil, nil, nil, { "data-action": "change->select-all#toggleAll", "data-select-all-target": "all" }
                     = t(".select_all")
               %td
                 %em= distributor.name
@@ -68,7 +67,7 @@
                           distributor_payment_method.id,
                           @order_cycle.distributor_payment_methods.include?(distributor_payment_method),
                           id: "order_cycle_selected_distributor_payment_method_ids_#{distributor_payment_method.id}",
-                          data: ({ "action" => "change->select-all#toggleCheckbox change->unsaved-changes#formIsChanged", "select-all-target" => "checkbox" } if distributor_payment_method.payment_method.frontend?)
+                          data: ({ "action" => "change->select-all#toggleCheckbox", "select-all-target" => "checkbox" } if distributor_payment_method.payment_method.frontend?)
                       = distributor_payment_method.payment_method.name
                 - distributor.payment_methods.inactive_or_backend.each do |payment_method|
                   %label.disabled
diff --git a/app/webpacker/controllers/unsaved_changes_controller.js b/app/webpacker/controllers/unsaved_changes_controller.js
index b3e042a84a..5381c06368 100644
--- a/app/webpacker/controllers/unsaved_changes_controller.js
+++ b/app/webpacker/controllers/unsaved_changes_controller.js
@@ -21,20 +21,25 @@ import { Controller } from "stimulus";
 //      <input data-action="change->unsaved-changes#formIsChanged" />
 //    </form>
 //
-// You can also combine the two event trigger ie : 
+// 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-unsaved-changes-changed="true"
 //    >
-// You then need to add 'data-action="change->unsaved-changes#formIsChanged"' on all the form element
-// that can be interacted with
 //
 // Optional, you can add 'data-unsaved-changes-changed="true"' if you want to disable all
 // submit buttons when the form hasn't been interacted with
 //
 export default class extends Controller {
   connect() {
+    // add onChange event to all form element
+    this.element
+      .querySelectorAll("input, select, textarea")
+      .forEach((input) => {
+        input.addEventListener("change", this.formIsChanged.bind(this));
+      });
+
     // disable submit button when first loading the page
     if (!this.isFormChanged() && this.isSubmitButtonDisabled()) {
       this.disableButtons();
@@ -77,8 +82,8 @@ export default class extends Controller {
   }
 
   submit(event) {
-    // if we are submitting the form, we don't want to trigger a warning so set changed to false 
-    this.setChanged("false")
+    // if we are submitting the form, we don't want to trigger a warning so set changed to false
+    this.setChanged("false");
   }
 
   setChanged(changed) {
diff --git a/spec/javascripts/stimulus/unsaved_changes_controller_test.js b/spec/javascripts/stimulus/unsaved_changes_controller_test.js
index 061f876db2..c70b77a9e9 100644
--- a/spec/javascripts/stimulus/unsaved_changes_controller_test.js
+++ b/spec/javascripts/stimulus/unsaved_changes_controller_test.js
@@ -19,7 +19,7 @@ describe("UnsavedChangesController", () => {
         data-action="unsaved-changes#submit 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" />
         <input id="test-submit" type="submit"/>
       </form>
     `
@@ -36,7 +36,7 @@ describe("UnsavedChangesController", () => {
             data-unsaved-changes-changed="false" 
             data-unsaved-changes-disable-submit-button="true"
           >
-            <input id="test-checkbox" type="checkbox" data-action="change->unsaved-changes#formIsChanged"/>
+            <input id="test-checkbox" type="checkbox" />
             <input id="test-submit" type="submit"/>
           </form>
         `
@@ -59,7 +59,7 @@ describe("UnsavedChangesController", () => {
             data-unsaved-changes-changed="false" 
             data-unsaved-changes-disable-submit-button="false"
           >
-            <input id="test-checkbox" type="checkbox" data-action="change->unsaved-changes#formIsChanged"/>
+            <input id="test-checkbox" type="checkbox" />
             <input id="test-submit" type="submit"/>
           </form>
         `