bruh moment

static/js/components/chat.js

@@ -13,7 +13,6 @@ const runChat = async () => {
   const isAtEdge = scrollTop > (0.92 * scrollTopMax) || scrollTop === 0;
   document.getElementById("messages").innerHTML = html;
   await new Promise((res) => setTimeout(res, 200)); // wait for html to emplace.
-  if (!document.getElementById("chat-container")) return;
   const emplacedScrollTopMax = document.getElementById("chat-container").scrollHeight - document.getElementById("chat-container").clientTop;
   if (isAtEdge) {
     document.getElementById("chat-container").scrollTop = scrollTopMax;
@@ -28,3 +27,21 @@ setTimeout(() => {
     runChat().then(() => setInterval(runChat, 2_500));
   }
 }, 200);
+
+const form = document.getElementById("chat-form");
+form.addEventListener('submit', (event) => {
+  event.preventDefault();
+
+  const message = document.getElementById("message-content").value;
+  const fren_id = document.getElementById("fren-id").value;
+  const params = new URLSearchParams();
+  params.append("fren_id", fren_id);
+  params.append("message", message);
+  fetch("/chat", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded"
+    },
+    body: params,
+  }).then(runChat);
+});

templates/chat.html

@@ -2,9 +2,9 @@
 <div id="messages">
 </div>
 <div>
-<form action="/chat" method="POST" autocomplete="off">
+<form action="/chat" method="POST" autocomplete="off" id="chat-form">
-  <input id="fren_id" name="fren_id" value="{{ .User.Id }}" type="hidden">
+  <input id="fren-id" name="fren_id" value="{{ .User.Id }}" type="hidden">
-  <input name="message" value="" type="text">
+  <input id="message-content" name="message" value="" type="text">
   <input type="submit" value="send.">
 </form>
 </div>