Refactor move endpoint to accept JSON input and update form submission method

src/Python/flask/web/static/script.js

@@ -1,25 +1,23 @@
-document.getElementById("form").addEventListener("click", function(event) {
-  event.preventDefault(); // Prevent the form from reloading the page
+document.getElementById("form").addEventListener("submit", function(event) {
+  event.preventDefault(); // voorkomt het herladen van de pagina
 
-  // Check if the target of the click event is a button
-  if (event.target.tagName === "BUTTON") {
-    const direction = event.target.value; // Get the direction from the button's value
+  // Haal de waarde van de ingedrukte knop op
+  const formData = new FormData(event.target);
+  const direction = formData.get("direction"); // Haalt de 'direction' waarde op
 
-    // Send the direction data to the server using fetch
-    fetch("/", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({ direction: direction })
-    })
-    .then(response => response.json())
-    .then(data => {
-      console.log("Success:", data);
-      // Optional: Update UI based on server response if needed
-    })
-    .catch(error => {
-      console.error("Error:", error);
-    });
-  }
+  // Verstuur de richting via fetch naar de server
+  fetch("/move", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({ direction: direction })
+  })
+  .then(response => response.json())
+  .then(data => {
+    console.log("Success:", data);
+  })
+  .catch(error => {
+    console.error("Error:", error);
+  });
 });