From 2f20f16292d82629980a4f18c42856d5e25e263d Mon Sep 17 00:00:00 2001
From: Kenneth Myhra <kennethmyhra@gmail.com>
Date: Fri, 3 Feb 2023 21:50:36 +0100
Subject: [PATCH] Base: Add a test using FormData and FormDataEvent

---
 Base/res/html/misc/formdata.html | 56 ++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 Base/res/html/misc/formdata.html
diff --git a/Base/res/html/misc/formdata.html b/Base/res/html/misc/formdata.html
new file mode 100644
index 0000000000..46378cdbbf
--- /dev/null
+++ b/Base/res/html/misc/formdata.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>FormData</title>
+  <script>
+    function log(s) {
+      document.getElementById("out").innerHTML += s + "\n"
+    }
+
+    function dumpFormContents() {
+      let form = document.getElementById("form1");
+      form.onformdata = (e) => {
+        log("Event 'formdata' fired.");
+        log("First name logged from the formdata event: " + e.formData.get("first_name") + "\n");
+      }
+
+      let formData = new FormData(form);
+      let firstName = formData.get("first_name");
+      let lastName = formData.get("last_name");
+      let file = formData.get("avatar");
+      let transportTypes = formData.getAll("transport_type");
+      log("First name: " + firstName);
+      log("Last name: " + lastName);
+      log("file: " + file.type);
+      log("Transportation types:");
+      for (let i = 0; transportTypes.length > i; i++)
+          log("  - " + transportTypes[i]);
+    }
+  </script>
+</head>
+<body>
+  <form id="form1">
+    <label for="first_name">First name:</label><br>
+    <input type="text" id="first_name" name="first_name" value="John"/><br>
+    <label for="last_name">Last name:</label><br>
+    <input type="text" id="last_name" name="last_name" value="Doe"/><br>
+    <label for="avatar">Avatar:</label><br>
+    <input type="file" id="avatar" name="avatar"/><br>
+
+    <p>How do you usually transport yourself?</p>
+    <input type="checkbox" id="transport_type1" name="transport_type" value="walking"/>
+    <label for="transport_type1">Walk</label><br>
+    <input type="checkbox" id="transport_type2" name="transport_type" value="public-transport"/>
+    <label for="transport_type2">Public transportation</label><br>
+    <input type="checkbox" id="transport_type3" name="transport_type" value="bicycle"/>
+    <label for="transport_type3">Bicycle</label><br>
+    <input type="checkbox" id="transport_type4" name="transport_type" value="motorcycle"/>
+    <label for="transport_type4">Motorcycle</label><br>
+    <input type="checkbox" id="transport_type5" name="transport_type" value="car"/>
+    <label for="transport_type5">Car</label><br>
+  </form>
+
+  <button onclick="dumpFormContents()">Test FormData Features</button>
+
+  <pre id="out"></pre>
+</body>
