view: Send forms as JSON with JavaScript

While forms can be send without JavaScript this new approach has the
benefit that the whole data is send as one JSON.

This JSON format can also be used for an API or testing.

1 files changed, 32 insertions, 0 deletions

diff --git a/view/static/ceres.js b/view/static/ceres.js
new file mode 100644
index 0000000..acb52a4
--- /dev/null
+++ b/view/static/ceres.js
@@ -0,0 +1,32 @@
+var forms = document.querySelectorAll('form');
+forms.forEach(form => {
+	form.addEventListener('submit', sendFormAsJson);
+});
+
+function sendFormAsJson(event) {
+	event.preventDefault();
+
+	const form = event.target;
+	const url = form.getAttribute('action');
+	const data = new FormData(form);
+	const obj = Object.fromEntries(data.entries());
+
+	fetch(url, {
+		method: 'POST',
+		headers: {'Content-Type': 'application/json'},
+		body: JSON.stringify(obj)
+	})
+	.then(response => {
+		if (response.ok) {
+			console.log('Form submitted successfully');
+		} else {
+			console.error('Form submission failed');
+		}
+		if (response.redirected) {
+			window.location.href = response.url;
+		}
+	})
+	.catch(error => {
+		console.error('Network error:', error);
+	});
+}