diff options
| author | stuebinm | 2021-04-07 19:27:13 +0200 |
|---|---|---|
| committer | stuebinm | 2021-04-07 19:27:13 +0200 |
| commit | b38dc5c1e3b87753bf23a1d335aa2d6f7dc5ee01 (patch) | |
| tree | 461d8bcf8b6e8636648f9c85f8a427b85a8e0256 | |
| parent | f5a3f1dfc9760094ef4a2937be9b4d7eba745c4d (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.
| -rw-r--r-- | site/index.html | 21 | ||||
| -rw-r--r-- | site/thanks.html | 12 |
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> |