wtf-webseite/assets/js/contact_form.js

96 lines
3.3 KiB
JavaScript
Raw Normal View History

const contactFormAjaxUrl = '/php/contact_form.php';
2022-08-24 15:27:20 +02:00
window.addEventListener('DOMContentLoaded', function() {
const contact_form = document.getElementsByClassName('content__contact_form')[0];
if (contact_form) {
contact_form.addEventListener('submit', wtf_submitContactForm, false);
wtf_startContactFormSession();
}
});
function wtf_startContactFormSession() {
let formData = new FormData();
formData.append('action', 'start_session');
fetch(contactFormAjaxUrl, {
method: 'POST',
mode: 'same-origin',
body: formData,
})
2022-08-24 15:15:08 +02:00
.then(response => {
if (!response.ok) {
throw new Error('Response was not OK');
}
return response.json();
})
.then(json => {
console.log(json);
})
2022-08-24 15:15:08 +02:00
.catch(error => {
console.error('Could not start the session:', error);
});
2022-08-24 15:27:20 +02:00
}
2022-08-24 15:27:20 +02:00
function wtf_submitContactForm(event) {
event.preventDefault();
2022-08-24 15:27:20 +02:00
const subject = document.getElementsByClassName('contact_form__subject')[0];
const message = document.getElementsByClassName('contact_form__message')[0];
const name = document.getElementsByClassName('contact_form__name')[0];
const email = document.getElementsByClassName('contact_form__email')[0];
const captcha = document.getElementsByClassName('contact_form__captcha')[0];
let formData = new FormData();
formData.append('action', 'handle_form');
2022-08-03 19:31:06 +02:00
formData.append('subject', subject.value);
formData.append('message', message.value);
formData.append('name', name.value);
formData.append('email', email.value);
// If some bot entered some value, return.
if (typeof captcha.value == 'undefined') {
formData.append('captcha', 'Nudelsuppe');
} else {
console.log('bot detected');
return;
}
fetch(contactFormAjaxUrl, {
method: 'POST',
mode: 'same-origin',
body: formData,
})
.then(response => response.json())
.then(json => {
2022-08-24 15:27:20 +02:00
const feedback = document.getElementsByClassName('contact_form__feedback')[0];
console.log(json);
if (json.errors) {
feedback.classList.remove('--success');
feedback.classList.add('--error');
// Über errors iterieren und diese ausgeben (evtl. nur ersten Fehler ausgeben?)
let error_message = '';
json.errors.forEach(function(error){
/**
* Nur Zeilenumbrüche wenn mehrer Fehlermeldungen existieren,
* aber bei der letzten nicht.
*/
if (json.errors.length > 1) {
if (error == json.errors[json.errors.length - 1]) {
error_message = error_message + error;
} else {
error_message = error_message + error + '<br>';
}
} else {
error_message = error_message + error;
}
})
feedback.innerHTML = error_message;
} else if (json.status == 'ok') {
feedback.classList.remove('--error');
feedback.classList.add('--success');
feedback.textContent = "Ihre Nachricht wurde erfolgreich ans Office geschickt.";
}
})
.catch(error => console.log(error));
2022-08-24 15:27:20 +02:00
}