Dynamic data collection from forms

app/templates/test/index.html.j2

@@ -14,14 +14,14 @@
           <div class="col s12 m4">
             <div class="input-field">
               <i class="material-icons prefix">title</i>
-              {{ test_form.title(data_length='32') }}
+              {{ test_form.title(class='validate', data_length='32') }}
               {{ test_form.title.label }}
             </div>
           </div>
           <div class="col s12 m8">
             <div class="input-field">
               <i class="material-icons prefix">description</i>
-              {{ test_form.description(data_length='255') }}
+              {{ test_form.description(class='validate', data_length='255') }}
               {{ test_form.description.label }}
             </div>
           </div>
@@ -46,19 +46,19 @@
 </div>
 
 <script>
-var testFormElement = document.getElementById("test-form");
+var testFormElement = document.forms.namedItem("test-form");
 
 testFormElement.addEventListener("submit", function(event) {
   event.preventDefault();
-  let csrfTokenElement = testFormElement.querySelector("input[name='csrf_token']"),
-      descriptionElement = testFormElement.querySelector("input[name='description']"),
-      fileElement = testFormElement.querySelector("input[name='file']"),
-      titleElement = testFormElement.querySelector("input[name='title']");
-  let file = fileElement.files[0];
-  let data = {"csrf_token": csrfTokenElement.value,
-              "description": descriptionElement.value,
-              "file": {"bytes": file, "name": file.name},
-              "title": titleElement.value};
+  let data = {};
+  for (let input of event.target.querySelectorAll("input")) {
+    if (input.type === "file") {
+      file = input.files[0];
+      data[input.name] = {"bytes": file, "name": file.name};
+    } else {
+      data[input.name] = input.value;
+    }
+  }
   nopaque.socket.emit("submit-test-form", data);
 });