// ERROR MESSAGES - SCROLL TIL MESSAGE
function scrollToError() {
document.getElementById("wrap_response_content");
response_content.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
}
// FORM "EMNE" - WP PAGELOAD - LOAD TEXT I response_default
document.addEventListener("DOMContentLoaded", response_default);
function response_default() {
// BESKEDER
const response_content = document.getElementById('response_content');
// DEAULT TEXT
response_content.innerHTML = "Vælg en kategori";
// INDSÆT TEXT I subject_description
const subject_description = document.getElementById('subject_description');
// DEAULT TEXT
subject_description.innerHTML = "Skriv til os:";
}
// ---
// GLOBALS TIL sendForm
let subjectValue;
let subjectChoice;
// FORM "EMNE" - WP PAGELOAD - subject_choice LOOP OG TILFØJ KLIK
document.addEventListener("DOMContentLoaded", getDefaultSubjectValue);
function getDefaultSubjectValue() {
subjectChoice = document.getElementsByClassName('subject_choice_input');
for (var i = 0; i < subjectChoice.length; i++) {
// PAGE LOAD - FIND CHECKED I HTML
if (subjectChoice[i].checked) {
subjectValue === "andet_input";
}
subjectChoice[i].addEventListener('click', getSubject);
}
}
// FORM "EMNE" - ON KLIK HENT VALUES OG SHOW / HIDE
function getSubject() {
// HENT VALUE FRA RADIO INPUT
subjectValue = event.target.value;
// FORM "EMNE"
// INDSÆT TEXT I subject_description AFHÆNGIGT AF VALG
const subjectDescription = document.getElementById("subject_description");
// FORM "MAIL"
// EMNE INPUT - BRUGES KUN VED "ANDET"
const subjectInput = document.getElementById("subject_input");
// MAIL INPUT - HIDE VED "AFBUD"
const mailInput = document.getElementById("mail_input");
// FORM "AFBUD"
// SHOW / HIDE FORM
const afbudChoice = document.getElementById("afbud_choices");
// ANDET
if (subjectValue === "andet_input") {
subjectDescription.innerHTML = "Skriv til os:";
subjectInput.style.display = "block"; // EMNE
mailInput.style.display = "block"; // MAIL
afbudChoice.style.display = "none"; // AFBUD
}
// NYE FRIVILLIGE
else if (subjectValue === "frivillige_input") {
subjectDescription.innerHTML = "Som ny frivillig modtager du en mail med en invitation til det næste Introduktionsmøde.
Har du spørgsmål, er du velkommmen til at skrive i beskeden.";
subjectInput.style.display = "none"; // EMNE
mailInput.style.display = "block"; // MAIL
afbudChoice.style.display = "none"; // AFBUD
}
// CYKELKURSUS
else if (subjectValue === "cykelkursus_input") {
subjectDescription.innerHTML = "Her kan du tilmelde dig cykelkursus for kvinder:
OBS! Cykelkurset har vinterlukket
- vi cykler igen snarest muligt! ";
subjectInput.style.display = "none"; // EMNE
mailInput.style.display = "block"; // MAIL
afbudChoice.style.display = "none"; // AFBUD
}
// AFBUD - VIS DAGE
else if (subjectValue === "afbud_input") {
subjectDescription.innerHTML = "Hvis du som frivillig i Lektiecafeen må melde afbud, bør du kontakte Husværten. Er dette ikke muligt, kan du melde afbud her. Skriv datoen som fx. 4-8
Melder du afbud flere end 1 dag?
Vælg ny dag + dato og send igen ";
subjectInput.style.display = "none"; // EMNE
mailInput.style.display = "none"; // MAIL
afbudChoice.style.display = "block"; // AFBUD
}
}
// ---
// FORM "MAIL" - WP PAGELOAD - ADD CLICK EVENT TIL BUTTON submit_contact
document.addEventListener("DOMContentLoaded", setSubmitClick);
function setSubmitClick() {
const submitForm = document.getElementById('submit_form');
submitForm.addEventListener('click', sendForm);
}
// SUBMIT FORM MED TASTATUR "ENTER"
document.onkeydown = function() {
// "ENTER" ER TAST NR 13
if (window.event.keyCode == '13') {
sendForm();
}
}
// ---
// FORM "MAIL" - EXPAND FORM TEXTAREA - VIRKER IKKE I WP !!!!
document.addEventListener("DOMContentLoaded", resizeTextarea);
function resizeTextarea() {
const messText = document.getElementById("message_textarea");
let maxHeight = 200;
// ON KLIK
messText.oninput = function() {
// alert("on input");
// RESET TIL MINDSTE HØJDE
messText.style.minHeight = "60px"; // WP ONLY - SET HEIGHT IN TEXTAREA !!
// messText.style.minHeight = "0px";
// messText.style.background = "pink";
// // WP VIRKER IKKE !!!!! EXPAND TIL maxHeight + ANTAL TEXT-LINIER scrollHeight
// messText.style.height = Math.min(messText.scrollHeight, maxHeight) + "px";
};
}
// ---
// FORM "AFBUD" - DAG VALUE
let afbudDayValue;
// FORM "AFBUD" - KLIKKED afbud_day INPUT
let thisDay;
// FORM "AFBUD" - DATO VALUE
let afbudDateValue;
// FORM "AFBUD" - afbud_day INPUT
const afbudDay = document.getElementsByClassName('afbud_day_input');
for (var i = 0; i < afbudDay.length; i++) {
// HENT DEFAULT INPUT VALUE TIL ERROR VAL
if (afbudDay[i].checked) {
// HENT DEFAULT VALUE
afbudDayValue = afbudDay[i].value;
}
// TILFØJ KLIK
afbudDay[i].addEventListener('click', hideDays);
}
// FORM "AFBUD" - RUN VED KLIK PÅ afbud_day + RESET OPACITY EFTER SUBMIT SUCCESS
function hideDays() {
// KLIKKED afbud_day INPUT
thisDay = event.target;
// HENT KLIKKED VALUE
afbudDayValue = thisDay.value;
// alert("afbudDayValue " + afbudDayValue);
// HIDE ALLE UGEDAGE DIV UNDTAGEN KLIKKED
const dayWrap = document.getElementsByClassName("day_wrap");
for (var i = 0; i < dayWrap.length; i++) {
// TILFØJ OPACITY PÅ ALLE UGEDAGE
dayWrap[i].style.opacity = "0.5";
// RESET OPACITY PÅ KLIKKED PARENT UGEDAG DIV
let thisDayWrap = thisDay.parentNode;
thisDayWrap.style.opacity = "1.0";
}
}
// ---
// RUN ON SUBMIT FORM "MAIL"
function sendForm() {
// FORM "EMNE" VALG - FIND CHECKED
for (var i = 0; i < subjectChoice.length; i++) {
// ER ET EMNE CHECKED
if (subjectChoice[i].checked) {
// HENT VALUE
subjectValue = subjectChoice[i].value;
}
}
// FORM "AFBUD" - FIND DATO VHA KLIKKED DAG
if (afbudDayValue !== "afbud_day_no_input") {
// LABEL -> SPAN -> INPUT afbud_date_input
let afbudDate = thisDay.nextElementSibling.lastElementChild;
// DATO VALUE
afbudDateValue = afbudDate.value;
}
// TIL TEST
// const subjectValue = VALG AF KLIKKED EMNE // BRUGES IKKE TIL TEST !!
// const subjectInput = "Mit emne er ønsker";
// const nameInput = "Mit Navn er æbler ";
// const mailInput = "test@frivillighuset.net";
// const mailInput = "skriv@til-ken.net";
// const messageTextarea = "Min besked er her æsler";
// const dbInput = "NO";
// INPUT VALUES
let subjectInput = document.getElementById("subject_input").value; // EMNE
let nameInput = document.getElementById("name_input").value; // NAVN
let mailInput = document.getElementById("mail_input").value; // MAIL
let messageTextarea = document.getElementById("message_textarea").value; // BESKED
let dbInput = document.getElementById("db_input").value;
// INDSÆT FORM "MAIL" VALUES I FORMDATA
let formData = new FormData();
formData.append('subject_value', subjectValue); // 1 PARAM INDSÆTTES I formData / 2 PARAM 2 ER string FRA INPUT
formData.append('subject_input', subjectInput);
formData.append('name_input', nameInput);
formData.append('mail_input', mailInput);
formData.append('message_textarea', messageTextarea);
formData.append('db_input', dbInput);
// alert(afbudDayValue);
// INDSÆT FORM "AFBUD" VALUES I FORMDATA
formData.append('afbud_day', afbudDayValue);
formData.append('afbud_date', afbudDateValue);
// BASE URL WP LOCALHOST
// const url = "/wp-frivillighuset/wp-content/plugins/wp-kontakt-form-emner/";
// const ext = "";
// BASE URL WP FRIV
const url = "https://frivillighuset.net/wp-content/plugins/wp-kontakt-form-emner/";
const ext = ".php";
// HENT validation URL
axios.post(url + "axios/a_get_url" + ext)
// axios.post(a_get_url)
.then(function (response) {
let validateUrl = response.data.validate_url;
// VALIDATE
axios.post(url + validateUrl + ext, formData)
.then(function(response) {
// VAL ERRORS
let errorMessage = response.data.error_message;
// HENT store URL
let storeUrl = response.data.store_url;
// alert(errorMessage);
// TJEK OM ERRORS
if (response.data !== "" && errorMessage !== "" && storeUrl === "") {
// VIS ERRORS
response_content.innerHTML = errorMessage;
scrollToError();
}
// NO ERRORS
else if (response.data !== "" && storeUrl !== "" && errorMessage === "") {
// HVIS RESPONSE status ER 200
if (response.status === 200) {
// STORE DATA
axios.get(url + storeUrl + ext)
.then(function (response) {
// HENT sent URL
let sentUrl = response.data.sent_url;
// ABORT HVIS DER IKKE ER KONTAKT TIL MYSQL
if (sentUrl === "connect_errno") {
// VIS ERRORS
response_content.innerHTML = "Ingen kontakt til databasen!
Bekeden blev ikke sendt";
scrollToError();
}
// GÅ TIL SENT MAIL
else {
// SEND MAIL
axios.get(url + sentUrl + ext)
.then(function (response) {
// STATUS SENDT
let sentResponse = response.data.sent_response;
response_content.innerHTML = sentResponse;
scrollToError();
// CLEAR INPUTS VALUES
let clearInputs = document.getElementsByClassName("clear_form");
for (i = 0; i < clearInputs.length; i++) {
// SLET TEXT INPUTS
clearInputs[i].value = "";
// SLET RADIO BUTTONS
clearInputs[i].checked = false;
// // RESET ALLE UGEDAGE OPACITY
// const dayWrapReset = document.getElementsByClassName("day_wrap");
// for (var i = 0; i < dayWrapReset.length; i++) {
// dayWrapReset[i].style.opacity = "1.0";
// }
}
});
}
}); // END OF STORE
} // END OF response 200
} // END OF else if
}) // END OF VALIDATE
}); // END OF GET URL