From b38dc5c1e3b87753bf23a1d335aa2d6f7dc5ee01 Mon Sep 17 00:00:00 2001 From: stuebinm Date: Wed, 7 Apr 2021 19:27:13 +0200 Subject: site: add visual feedback on survey submission After a submission, the survey will now either redirect to a "thanks for your answers!"-site (if the POST request had status 200) or else display some kind of error message. --- site/index.html | 21 +++++++++++++++++++-- site/thanks.html | 12 ++++++++++++ 2 files changed, 31 insertions(+), 2 deletions(-) create mode 100644 site/thanks.html (limited to 'site') diff --git a/site/index.html b/site/index.html index 2fc90e7..6dc12fa 100644 --- a/site/index.html +++ b/site/index.html @@ -1,5 +1,6 @@ + test @@ -135,10 +136,13 @@ let footer = mkElement("section"); let submit = mkElement("button", "Submit"); + let errormsg = mkElement("p", ""); appendChildren(footer, [ mkElement("hr"), - submit + submit, + errormsg ]); + errormsg.hidden = true; submit.onclick = () => { // the callback over the complete survey just maps all // other callbacks to their values, i.e. calls them all @@ -159,7 +163,20 @@ "X-Survey": survey.title, "Content-Type": "text/age" } - }).then(response => console.log(response.text())) + }).then(response => { + console.log(response); + if (response.status === 200) { + console.log(response.text()) + window.location.href = "thanks.html"; + } + errormsg.innerText = "POST request returned error code: " + + response.status + ": " + response.statusText; + errormsg.hidden = false; + }).catch(error => { + console.log(error); + errormsg.innerText = "Error: The http POST request did not succeed."; + errormsg.hidden = false; + }); } root.appendChild(footer); diff --git a/site/thanks.html b/site/thanks.html new file mode 100644 index 0000000..1043ec3 --- /dev/null +++ b/site/thanks.html @@ -0,0 +1,12 @@ + + + Thanks for answering the survey! + + + +
+

Thanks for your answers!

+

Your submission was sent and received successfully.

+
+ + -- cgit v1.2.3