diff options
| author | xengineering <me@xengineering.eu> | 2024-02-17 19:36:19 +0100 |
|---|---|---|
| committer | xengineering <me@xengineering.eu> | 2024-03-03 14:00:10 +0100 |
| commit | 78116f571ad4801bd10c51077b50ec87f1f68be7 (patch) | |
| tree | 4f860490e73376d9d0eb27b22c80bc83272255c8 /view | |
| parent | e105822a4f2227ca97853ac1bf106f8d204d6837 (diff) | |
| download | ceres-78116f571ad4801bd10c51077b50ec87f1f68be7.tar ceres-78116f571ad4801bd10c51077b50ec87f1f68be7.tar.zst ceres-78116f571ad4801bd10c51077b50ec87f1f68be7.zip | |
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.
Diffstat (limited to 'view')
| -rw-r--r-- | view/html/recipe-edit.html | 6 | ||||
| -rw-r--r-- | view/static/ceres.js | 32 |
2 files changed, 37 insertions, 1 deletions
diff --git a/view/html/recipe-edit.html b/view/html/recipe-edit.html index 7a50905..2513be8 100644 --- a/view/html/recipe-edit.html +++ b/view/html/recipe-edit.html @@ -10,7 +10,9 @@ </header> <body> <main> - <form> + <form action="/recipe?method=update"> + <input type="hidden" name="id" value="{{.Id}}"> + <p> <label>Title</label> <input type="text" name="title" value="{{.Title}}"> @@ -31,10 +33,12 @@ <input type="text" name="notes" value="{{.Notes}}"> </p> + <button type="submit">save</button> <a href="/recipe/{{.Id}}"><button type="button">cancel</button></a> </form> </main> {{ template "footer" }} + <script src="/static/view/static/ceres.js"></script> </body> </html> {{end}} 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); + }); +} |