Form submits in place.

Author: wallstreetio

.cursor/skills/preview-local/SKILL.md

@@ -0,0 +1,16 @@
+---
+name: preview-local
+description: Use playwright mcp to view local docs
+---
+# Preview local
+
+# When to use
+* When you need to diagnose or confirm issues with docs
+
+## Instructions 
+
+* The dev server should already be running.
+* Use the playwright mcp server.
+* Go to the [docs homepage](http://localhost:8000/#welcome). If the page does not load because the dev server is not running, stop.
+* browse as necessary
+

docs/assets/javascript/feedback-form.js

@@ -0,0 +1,20 @@
+document.addEventListener("submit", (event) => {
+  const form = event.target.closest("[data-feedback-form]");
+  if (!form) return;
+
+  event.preventDefault();
+
+  if (!form.reportValidity()) return;
+
+  const container = form.closest("[data-feedback-form-container]");
+  if (!container) return;
+
+  const data = Object.fromEntries(new FormData(form));
+  fetch(form.action, {
+    method: form.method || "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data),
+  }).catch(() => {});
+
+  container.innerHTML = "<p>Thank you for your feedback!</p>";
+});

docs/index.md

@@ -21,7 +21,8 @@ Wallstreet.io has everything a trader could need to trade wisely:
 
 ## Report an issue
 
-<form action="https://example.com/feedback" method="POST">
+<div data-feedback-form-container>
+<form action="https://example.com/feedback" method="POST" data-feedback-form>
   <p>
     <label for="page-url">Page URL</label><br>
     <input type="url" id="page-url" name="url" class="md-input md-input--stretch" required >
@@ -36,4 +37,5 @@ Wallstreet.io has everything a trader could need to trade wisely:
   </p>
   <button type="submit" class="md-button md-button--primary">Submit</button>
 </form>
+</div>
 

zensical.toml

@@ -109,7 +109,7 @@ extra_css = ["assets/stylesheets/extra.css"]
 # The path provided should be relative to the "docs_dir".
 #
 # Read more: https://zensical.org/docs/customization/#additional-javascript
-#extra_javascript = ["javascripts/extra.js"]
+extra_javascript = ["assets/javascript/feedback-form.js"]
 
 # ----------------------------------------------------------------------------
 # Section for configuring theme options