summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorstuebinm2021-04-07 19:27:13 +0200
committerstuebinm2021-04-07 19:27:13 +0200
commitb38dc5c1e3b87753bf23a1d335aa2d6f7dc5ee01 (patch)
tree461d8bcf8b6e8636648f9c85f8a427b85a8e0256
parentf5a3f1dfc9760094ef4a2937be9b4d7eba745c4d (diff)
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.
Diffstat (limited to '')
-rw-r--r--site/index.html21
-rw-r--r--site/thanks.html12
2 files changed, 31 insertions, 2 deletions
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 @@
<html>
<head>
+ <meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
@@ -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 @@
+<html>
+ <head>
+ <title>Thanks for answering the survey!</title>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ </head>
+ <body>
+ <div>
+ <h1>Thanks for your answers!</h1>
+ <p>Your submission was sent and received successfully.</p>
+ </div>
+ </body>
+</html>