created an html form that can take in the url and api key

Maria-Aidarus · Nov 22, 2023 · 7c97630 · 7c97630
1 parent ecc7a01
commit 7c97630
Showing 1 changed file with 48 additions and 0 deletions.
diff --git a/form.html b/form.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Invoke Netlify Function</title>
+</head>
+<body>
+    <h1>Invoke Netlify Function</h1>
+    <form id="invokeForm" action="https://main--radiant-entremet-3fce83.netlify.app/.netlify/functions/handleMetadata" method="POST" onsubmit="invokeFunction(event)">
+        <label for="url">URL:</label>
+        <input type="text" id="url" name="url" value="https://example.com"><br><br>
+
+        <label for="apiKey">API Key:</label>
+        <input type="text" id="apiKey" name="apiKey" value="your-api-key"><br><br>
+
+        <input type="submit" value="Invoke Function">
+    </form>
+
+    <div id="result"></div>
+
+    <script>
+        async function invokeFunction(event) {
+            event.preventDefault(); // Prevent the default form submission behavior
+
+            const url = document.getElementById("url").value;
+            const apiKey = document.getElementById("apiKey").value;
+
+            const formData = { url, apiKey };
+
+            try {
+                const response = await fetch("https://main--radiant-entremet-3fce83.netlify.app/.netlify/functions/handleMetadata", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json"
+                    },
+                    body: JSON.stringify(formData)
+                });
+
+                const data = await response.json();
+
+                // Display the result in the "result" div
+                document.getElementById("result").innerHTML = JSON.stringify(data, null, 2);
+            } catch (error) {
+                console.error("Error:", error);
+            }
+        }
+    </script>
+</body>
+</html>