// update displayed data every second
setInterval(updateContent, 1000);
+
</script>
</head>
<body>
</header>
<div class="w3-container">
- <form>
+ <form id="test-metadata" action="/metadata" method="post">
<div class="w3-section">
<label>Motor Maker</label>
- <input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="Motor Maker">
- <label>Propellant Formula</label>
- <input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="Propellant Formula">
+ <input class="w3-input w3-border w3-margin-bottom" type="text" name="maker" placeholder="Motor Maker">
+ <label>Propellant</label>
+ <input class="w3-input w3-border w3-margin-bottom" type="text" name="propellant" placeholder="Propellant">
<label>Description</label>
- <input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="Description">
+ <input class="w3-input w3-border w3-margin-bottom" type="text" name="description" placeholder="Description">
<label>Notes</label>
- <input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="Notes">
- <button class="w3-black w3-btn-block w3-section w3-padding">Submit</button>
+ <input class="w3-input w3-border w3-margin-bottom" type="text" name="notes" placeholder="Notes">
+ <button type="submit" class="w3-black w3-btn-block w3-section w3-padding">Submit</button>
</div>
</form>
</div>
</div>
+ <script>
+
+ /**
+ * Helper function for POSTing data as JSON with fetch.
+ *
+ * @param {Object} options
+ * @param {string} options.url - URL to POST data to
+ * @param {FormData} options.formData - `FormData` instance
+ * @return {Object} - Response body from URL that was POSTed to
+ */
+ async function postFormDataAsJson({ url, formData }) {
+ const plainFormData = Object.fromEntries(formData.entries());
+ const formDataJsonString = JSON.stringify(plainFormData);
+
+ const fetchOptions = {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Accept: "application/json",
+ },
+ body: formDataJsonString,
+ };
+
+ const response = await fetch(url, fetchOptions);
+
+ if (!response.ok) {
+ const errorMessage = await response.text();
+ throw new Error(errorMessage);
+ }
+
+ return response.json();
+ }
+
+ /**
+ * Event handler for a form submit event.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event
+ *
+ * @param {SubmitEvent} event
+ */
+ async function handleFormSubmit(event) {
+ event.preventDefault();
+
+ const form = event.currentTarget;
+ const url = form.action;
+
+ try {
+ const formData = new FormData(form);
+ const responseData = await postFormDataAsJson({ url, formData });
+
+ console.log({ responseData });
+ } catch (error) {
+ console.error(error);
+ }
+ }
+
+ const metadataForm = document.getElementById("test-metadata");
+ metadataForm.addEventListener("submit", handleFormSubmit);
+
+ </script>
</body>
+
</html>
projects / fw / quantimotor / commitdiff