feat: server html form

2021-07-23 16:03:41 -07:00
parent e0d1f50710
commit 7b7eb4db7f
2 changed files with 61 additions and 0 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://raw.githubusercontent.com/jgthms/minireset.css/master/minireset.min.css"
+    />
+    <title>Request Demo</title>
+  </head>
+  <body>
+    <h1>Request Demo</h1>
+
+    <h2>Basic POST Form</h2>
+    <form id="post-form" method="POST" target="/">
+      <input name="field" />
+      <button type="submit">Submit</button>
+    </form>
+
+    <h2>Basic AJAX Form</h2>
+    <form id="ajax-form" method="POST" target="/">
+      <input name="field" />
+      <button type="submit">Submit</button>
+    </form>
+
+    <script>
+      async function submitForm(evt) {
+        // stop default form behavior
+        evt.preventDefault();
+
+        const target = evt.target;
+        const input = target.querySelector("input").value;
+
+        await fetch("/form", {
+          method: "POST",
+          body: JSON.stringify({ input }),
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        alert("Submitted!")
+      }
+
+      const form = document
+        .querySelector("#ajax-form")
+        .addEventListener("submit", submitForm, false);
+    </script>
+  </body>
+</html>