parker/pkrm.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Handle CORS Errors

Browse Source 
CORS errors were previously not correctly handled, meaning the error message for the contact form would not appear. This is now fixed.
This commit is contained in:
Parker M. 2023-09-11 18:45:09 -05:00
parent 9d6df2c3e7
commit 63541d5b7d
No known key found for this signature in database
GPG Key ID: 95CD2E0C7E329F2A
1 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
contact/script.js
View File

@ -33,9 +33,10 @@ function validateForm() {
function checkForm() { function checkForm() {
if (nameInput.value.length > 0 && email.value.length > 0 && message.value.length > 0) { if (nameInput.value.length > 0 && email.value.length > 0 && message.value.length > 0) {
const response = document.querySelector('.response');
// Send a POST request to the server with the form data in JSON // Send a POST request to the server with the form data in JSON
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://contact.pkrm.dev', true); xhr.open('POST', 'https://contact.pkrm.dev');
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8"); xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
const body = JSON.stringify({ const body = JSON.stringify({
@ -43,8 +44,11 @@ function checkForm() {
email: email.value, email: email.value,
message: message.value message: message.value
}); });
// Send the body and log 'success' if no error, otherwise log 'error'
// Use onerror to log the error
xhr.send(body);
xhr.onload = () => { xhr.onload = () => {
const response = document.querySelector('.response');
if (xhr.status == 200) { if (xhr.status == 200) {
response.innerHTML = 'Thank you for submitting your message. I will get back to you as soon as possible.'; response.innerHTML = 'Thank you for submitting your message. I will get back to you as soon as possible.';
response.style.visibility = 'visible'; response.style.visibility = 'visible';
@ -52,13 +56,17 @@ function checkForm() {
nameInput.value = ''; nameInput.value = '';
email.value = ''; email.value = '';
message.value = ''; message.value = '';
} else { }
}
xhr.onerror = () => {
response.innerHTML = "Sorry, there was an error when submitting your message. Please try again later."; response.innerHTML = "Sorry, there was an error when submitting your message. Please try again later.";
response.style.visibility = 'visible'; response.style.visibility = 'visible';
response.style.color = "#FA5B5B" response.style.color = "#FA5B5B"
nameInput.value = '';
email.value = '';
message.value = '';
} }
};
xhr.send(body);
} else { } else {
if (nameInput.value.length == 0) { if (nameInput.value.length == 0) {