Fix purchase form logic

games/static/js/add_purchase.js

@@ -25,18 +25,7 @@ function setupElementHandlers() {
 
 document.addEventListener("DOMContentLoaded", setupElementHandlers);
 document.addEventListener("htmx:afterSwap", setupElementHandlers);
-getEl("#id_type").onchange = () => {
+getEl("#id_type").addEventListener("change", () => {
   setupElementHandlers();
-};
-
-document.body.addEventListener("htmx:beforeRequest", function (event) {
-  // Assuming 'Purchase1' is the element that triggers the HTMX request
-  if (event.target.id === "id_games") {
-    var idEditionValue = document.getElementById("id_games").value;
-
-    // Condition to check - replace this with your actual logic
-    if (idEditionValue != "") {
-      event.preventDefault(); // This cancels the HTMX request
-    }
-  }
-});
+}
+);

games/static/js/utils.js

@@ -43,6 +43,7 @@ function syncSelectInputUntilChanged(syncData, parentSelector = document) {
         const targetElement = document.querySelector(syncItem.target);
 
         if (targetElement && valueToSync !== null) {
+          console.log(`Changing value of ${syncItem.target} to ${valueToSync}`)
           targetElement[syncItem.target_value] = valueToSync;
         }
       }
@@ -184,13 +185,17 @@ function disableElementsWhenValueNotEqual(
 function disableElementsWhenTrue(targetSelect, targetValue, elementList) {
   return conditionalElementHandler([
     () => {
+      console.log(`${disableElementsWhenTrue.name}: triggered on ${targetSelect}`)
+      console.log(`Value of ${targetSelect} is ${targetValue}: ${getEl(targetSelect).value == targetValue}`)
       return getEl(targetSelect).value == targetValue;
     },
     elementList,
     (el) => {
+      console.log(`${disableElementsWhenTrue.name}: disabling ${el.id}`)
       el.disabled = "disabled";
     },
     (el) => {
+      console.log(`${disableElementsWhenTrue.name}: enabling ${el.id}`)
       el.disabled = "";
     },
   ]);