Dynamic data collection from forms

This commit is contained in:
Patrick Jentsch 2020-01-23 09:43:51 +01:00
parent fb089d62f0
commit 88873c8aee

View File

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