Ensure any form submissions are interception

Author: tireymorris

src/util/hyperwave.js

@@ -204,6 +204,7 @@ const setupEventHandlers = (triggerElement) => {
 
 /**
  * Attaches hyperwave event handlers to all elements within a given root element.
+ * Ensures any form submissions with hyperwave'd elements are intercepted.
  * @param {HTMLElement} rootElement - The root element to search for trigger elements.
  */
 const attachHyperwaveHandlers = (rootElement) => {
@@ -229,4 +230,26 @@ document.addEventListener("DOMContentLoaded", () => {
   });
 
   observer.observe(document.body, { childList: true, subtree: true });
+
+  const forms = document.querySelectorAll("form[href]");
+  forms.forEach((form) => {
+    form.addEventListener("submit", (event) => {
+      event.preventDefault();
+      log("log", "Form submission intercepted", form);
+
+      const fetchOptions = {
+        method: form.getAttribute("method") || hyperwaveConfig.defaultMethod,
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: new URLSearchParams(new FormData(form)).toString(),
+      };
+
+      const url = new URL(form.getAttribute("href"), window.location.origin);
+      fetchContent(url.toString(), fetchOptions).then((content) => {
+        const target = document.querySelector(
+          form.getAttribute("target") || "#trip-details",
+        );
+        updateTargetElement(target, content, "replace");
+      });
+    });
+  });
 });