/* feedback zakaz*/ $(document).ready(function(){ $('[data-action="feedback_smetaproekt"]').click(function(){ return sender_feedback($('[data-form="feedback_smetaproekt"]'), function() { $('[data-form="feedback_smetaproekt"]')[0].reset(); location.href = '/send/?act=feedback_smetaproekt'; }); }); $('[data-action="feedback_smetaproekt_event"]').click(function(){ return sender_feedback($('[data-form="feedback_smetaproekt_event"]'), function() { $('[data-form="feedback_smetaproekt_event"]')[0].reset(); location.href = '/send/?act=feedback_smetaproekt_event'; }); }); $('[data-action="feedback"]').click(function(){ return sender_feedback($('[data-form="feedback"]'), function() { $('[data-form="feedback"]')[0].reset(); location.href = '/send/?act=feedback'; }); }); $('[data-action="feedback_register"]').click(function(){ return sender_feedback($('[data-form="feedback_register"]'), function() { $('[data-form="feedback_register"]')[0].reset(); location.href = '/send/?act=feedback_register'; }); }); $('[data-action="feedback_skidka"]').click(function(){ return sender_feedback($('[data-form="feedback_skidka"]'), function() { $('[data-form="feedback_skidka"]')[0].reset(); location.href = '/send/?act=feedback_skidka'; }); }); $('[data-action="feedback_call"]').click(function(){ return sender_feedback($('[data-form="feedback_call"]'), function() { $('[data-form="feedback_call"]')[0].reset(); location.href = '/send/?act=feedback_call'; }); }); function sender_feedback(feedback, successCallback) { var name = feedback.find('[name="name"]').val(); var phone = feedback.find('[name="phone"]').val(); var title = feedback.find('[name="title"]').val(); var email = feedback.find('[name="email"]:checked').val(); var files = feedback.find('[name="files"]').val(); var detail = feedback.find('[name="detail"]').val(); var messenger = feedback.find('[name="messenger"]:checked').val(); var link = feedback.find('[name="link"]').val(); var errors = 0; if (name.length < 3) { $errors++; feedback.find('[name="name"]').addClass('error'); feedback.find('[name="name"]').parent().addClass('error'); } else { feedback.find('[name="name"]').removeClass('error'); feedback.find('[name="name"]').parent().removeClass('error'); } if (phone.length < 6) { errors++; feedback.find('[name="phone"]').addClass('error'); feedback.find('[name="phone"]').parent().addClass('error'); } else { feedback.find('[name="phone"]').removeClass('error'); feedback.find('[name="phone"]').parent().removeClass('error'); } if (errors > 0) { return false; } $.ajax({ url: "/ajax/feedback/", type: 'POST', data: { name:name, email:email, phone:phone, title:title, detail:detail, files:files, messenger:messenger, link:link, message:feedback.find('[name="message"]').val() }, dataType: 'JSON', success: function(data) { successCallback(); }, error: function(xhr, status) { } }); return false; } $('#close_success').click(function(){ $(this).parent().parent().fadeOut('fast'); }); }); /* quiz calculator forms */ function Survey(survey) { if (!survey) { throw new Error("No Survey Form found!"); } // select the elements const progressbar = survey.querySelector(".progressbar"); const surveyPanels = survey.querySelectorAll(".survey__panel"); const question1Radios = survey.querySelectorAll("[name='question_1']"); const question7Radios = survey.querySelectorAll("[name='question_7']"); const question2Radios = survey.querySelectorAll("[name='question_2']"); const question3CheckBoxes = survey.querySelectorAll("[name='question_3']"); const question4Radios = survey.querySelectorAll("[name='question_4']"); const question5Radios = survey.querySelectorAll("[name='question_5']"); const myName5input = survey.querySelectorAll("[name='question_6']"); const allPanels = Array.from(survey.querySelectorAll(".survey__panel")); let progressbarStep = Array.from( progressbar.querySelectorAll(".progressbar__step ") ); const mainElement = document.querySelector("main"); const titleFinal = document.querySelector(".final_zagolovok"); const titleFinalProgress = document.querySelector(".final_progressbar"); const titleFinalFace = document.querySelector(".final_face"); const nextButton = survey.querySelector("[name='next']"); const prevButton = survey.querySelector("[name='prev']"); const submitButton = survey.querySelector("[name='submit']"); let currentPanel = Array.from(surveyPanels).filter((panel) => panel.classList.contains("survey__panel--current") )[0]; const formData = {}; const options = { question1Radios, question2Radios, question7Radios, question3CheckBoxes, question4Radios, question5Radios, myName5input, }; let dontSubmit = false; function storeInitialData() { allPanels.map((panel) => { let index = panel.dataset.index; let panelName = panel.dataset.panel; let question = panel .querySelector(".survey__panel__question") .textContent.trim(); formData[index] = { panelName: panelName, question: question }; }); } function updateProgressbar() { let index = currentPanel.dataset.index; let currentQuestion = formData[`${parseFloat(index)}`].question; progressbar.setAttribute("aria-valuenow", index); progressbar.setAttribute("aria-valuetext", currentQuestion); progressbarStep[index - 1].classList.add("active"); } function updateFormData({ target }) { const index = +currentPanel.dataset.index; const { name, type, value } = target; if (type === "checkbox") { if (formData[index].answer === undefined) { formData[index].answer = { [name]: [value] }; return; } if (formData[index]["answer"][`${name}`].includes(value)) { const position = formData[index]["answer"][`${name}`].findIndex( (elem) => elem === value ); formData[index]["answer"][`${name}`].splice(position, 1); } else { formData[index]["answer"][`${name}`].push(value); } return; } if (index === 4 || index === 7) { let copy; const original = formData[index].answer; if (original === undefined) { formData[index].answer = { [name]: value }; copy = { ...formData[index].answer }; } else { formData[index].answer = { ...original, [name]: value }; } return; } formData[index].answer = { [name]: value }; } function showError(input, text) { const formControl = input.parentElement; const errorElement = formControl.querySelector(".error-message"); errorElement.innerText = text; errorElement.setAttribute("role", "alert"); if (survey.classList.contains("form-error")) return; survey.classList.add("form-error"); } function noErrors(input) { if (!input) { const errorElement = currentPanel.querySelector(".error-message"); errorElement.textContent = ""; errorElement.removeAttribute("role"); survey.classList.remove("form-error"); return; } const formControl = input.parentElement; const errorElement = formControl.querySelector(".error-message"); errorElement.innerText = ""; errorElement.removeAttribute("role"); } function getName(input) { // if (input.name === "age") return "Age"; // if (input.name === "country") return "Country"; return `${input.id.charAt(0).toUpperCase()}${input.id.slice(1)}`; } function checkRequired(input) { if (input.value.trim() === "") { showError(input, `${getName(input)} is required`); } else { noErrors(input); } } function checkRequirements() { const requirement = currentPanel.dataset.requirement; const index = currentPanel.dataset.index; const errorElement = currentPanel.querySelector(".error-message"); if (formData[index].hasOwnProperty("answer") && +index === 7) { const req = requirement.split(";"); let data = Object.keys(formData[index].answer); let arr = []; let res; for (let i = 0; i < data.length; i++) { res = req.includes(data[i]) ? data[i] : ""; arr.push(res); } if ( arr.length === 4 && arr.every((elem) => formData[index].answer.hasOwnProperty(elem)) ) { survey.classList.remove("form-error"); dontSubmit = true; } } else { errorElement.setAttribute("role", "alert"); survey.classList.add("form-error"); } } function updateProgressbarBar() { const index = currentPanel.dataset.index; let currentQuestion = formData[`${parseFloat(index)}`].question; progressbar.setAttribute("aria-valuenow", index); progressbar.setAttribute("aria-valuetext", currentQuestion); progressbarStep[index].classList.remove("active"); } var wasCalledPage2 = false; var wasCalledPage7 = false; function displayNextPanel() { currentPanel.classList.remove("survey__panel--current"); currentPanel.setAttribute("aria-hidden", true); currentPanel = currentPanel.nextElementSibling; currentPanel.classList.add("survey__panel--current"); currentPanel.setAttribute("aria-hidden", false); updateProgressbar(); if (+currentPanel.dataset.index > 1) { prevButton.disabled = false; prevButton.setAttribute("aria-hidden", false); titleFinal.classList.remove("none_title"); titleFinalProgress.classList.remove("none_title"); titleFinalFace.classList.add("none_mobile"); } if (+currentPanel.dataset.index === 2) { if (wasCalledPage2 !== true) { wasCalledPage2 = true; ym(98017040,'reachGoal','STAT_LD_2'); // stat } } if (+currentPanel.dataset.index === 7) { nextButton.disabled = true; nextButton.setAttribute("aria-hidden", true); submitButton.disabled = false; submitButton.setAttribute("aria-hidden", false); titleFinal.classList.add("none_title"); titleFinalProgress.classList.add("none_title"); if (wasCalledPage7 !== true) { wasCalledPage7 = true; ym(98017040,'reachGoal','STAT_LD_7'); // stat } } } function displayPrevPanel() { currentPanel.classList.remove("survey__panel--current"); currentPanel.setAttribute("aria-hidden", true); currentPanel = currentPanel.previousElementSibling; currentPanel.classList.add("survey__panel--current"); currentPanel.setAttribute("aria-hidden", false); updateProgressbarBar(); if (+currentPanel.dataset.index === 1) { prevButton.disabled = true; prevButton.setAttribute("aria-hidden", true); titleFinalFace.classList.remove("none_mobile"); } if (+currentPanel.dataset.index < 7) { nextButton.disabled = false; nextButton.setAttribute("aria-hidden", false); submitButton.disabled = true; submitButton.setAttribute("aria-hidden", true); titleFinal.classList.remove("none_title"); titleFinalProgress.classList.remove("none_title"); } } function handleprevButton() { displayPrevPanel(); } function handleNextButton() { const index = currentPanel.dataset.index; if (!formData[index].hasOwnProperty("answer")) { checkRequirements(); displayNextPanel(); } else { noErrors(); displayNextPanel(); } } // submitting the form function handleFormSubmit(e) { checkRequirements(); if (!dontSubmit) { e.preventDefault(); } else { mainElement.classList.add("submission"); mainElement.setAttribute("role", "alert"); mainElement.innerHTML = `

Спасибо!

Формы успешно были заполнены и отправлены`; return false; } } storeInitialData(); // Add event listeners function addListenersTo({ question1Radios, question2Radios, question7Radios, question3CheckBoxes, question4Radios, question5Radios, myName5input, ...inputs }) { question1Radios.forEach((elem) => elem.addEventListener("change", updateFormData) ); question2Radios.forEach((elem) => elem.addEventListener("change", updateFormData) ); question7Radios.forEach((elem) => elem.addEventListener("change", updateFormData) ); question3CheckBoxes.forEach((elem) => elem.addEventListener("change", updateFormData) ); question4Radios.forEach((elem) => elem.addEventListener("change", updateFormData) ); question5Radios.forEach((elem) => elem.addEventListener("change", updateFormData) ); myName5input.forEach((elem) => elem.addEventListener("change", updateFormData) ); let { } = inputs; } nextButton.addEventListener("click", handleNextButton); prevButton.addEventListener("click", handleprevButton); addListenersTo(options); survey.addEventListener("submit", handleFormSubmit); } const survey = Survey(document.querySelector(".survey")); /* MARquiz calculator seconds forms */ function Survey_mar(survey_mar) { if (!survey_mar) { throw new Error("No Survey Form found!"); } // select the elements const progressbar = survey_mar.querySelector(".progressbar"); const surveyPanels = survey_mar.querySelectorAll(".survey__panel"); const question1Radios = survey_mar.querySelectorAll("[name='question_1']"); const question7Radios = survey_mar.querySelectorAll("[name='question_7']"); const question2Radios = survey_mar.querySelectorAll("[name='question_2']"); const question3CheckBoxes = survey_mar.querySelectorAll("[name='question_3']"); const question4Radios = survey_mar.querySelectorAll("[name='question_4']"); const question5Radios = survey_mar.querySelectorAll("[name='question_5']"); const myName5input = survey_mar.querySelectorAll("[name='question_6']"); const allPanels = Array.from(survey_mar.querySelectorAll(".survey__panel")); let progressbarStep = Array.from( progressbar.querySelectorAll(".progressbar__step ") ); const mainElement = document.querySelector("main"); const titleFinalProgress = document.querySelector(".final_progressbar_mr"); const nextButton = survey_mar.querySelector("[name='next']"); const prevButton = survey_mar.querySelector("[name='prev']"); const submitButton = survey_mar.querySelector("[name='submit']"); let currentPanel = Array.from(surveyPanels).filter((panel) => panel.classList.contains("survey__panel--current") )[0]; const formData = {}; const options = { question1Radios, question2Radios, question7Radios, question3CheckBoxes, question4Radios, question5Radios, myName5input, }; let dontSubmit = false; function storeInitialData() { allPanels.map((panel) => { let index = panel.dataset.index; let panelName = panel.dataset.panel; let question = panel .querySelector(".survey__panel__question") .textContent.trim(); formData[index] = { panelName: panelName, question: question }; }); } function updateProgressbar() { let index = currentPanel.dataset.index; let currentQuestion = formData[`${parseFloat(index)}`].question; progressbar.setAttribute("aria-valuenow", index); progressbar.setAttribute("aria-valuetext", currentQuestion); progressbarStep[index - 1].classList.add("active"); } function updateFormData({ target }) { const index = +currentPanel.dataset.index; const { name, type, value } = target; if (type === "checkbox") { if (formData[index].answer === undefined) { formData[index].answer = { [name]: [value] }; return; } if (formData[index]["answer"][`${name}`].includes(value)) { const position = formData[index]["answer"][`${name}`].findIndex( (elem) => elem === value ); formData[index]["answer"][`${name}`].splice(position, 1); } else { formData[index]["answer"][`${name}`].push(value); } return; } if (index === 4 || index === 7) { let copy; const original = formData[index].answer; if (original === undefined) { formData[index].answer = { [name]: value }; copy = { ...formData[index].answer }; } else { formData[index].answer = { ...original, [name]: value }; } return; } formData[index].answer = { [name]: value }; } function showError(input, text) { const formControl = input.parentElement; const errorElement = formControl.querySelector(".error-message"); errorElement.innerText = text; errorElement.setAttribute("role", "alert"); if (survey_mar.classList.contains("form-error")) return; survey_mar.classList.add("form-error"); } function noErrors(input) { if (!input) { const errorElement = currentPanel.querySelector(".error-message"); errorElement.textContent = ""; errorElement.removeAttribute("role"); survey_mar.classList.remove("form-error"); return; } const formControl = input.parentElement; const errorElement = formControl.querySelector(".error-message"); errorElement.innerText = ""; errorElement.removeAttribute("role"); } function getName(input) { // if (input.name === "age") return "Age"; // if (input.name === "country") return "Country"; return `${input.id.charAt(0).toUpperCase()}${input.id.slice(1)}`; } function checkRequired(input) { if (input.value.trim() === "") { showError(input, `${getName(input)} is required`); } else { noErrors(input); } } function checkRequirements() { const requirement = currentPanel.dataset.requirement; const index = currentPanel.dataset.index; const errorElement = currentPanel.querySelector(".error-message"); if (formData[index].hasOwnProperty("answer") && +index === 7) { const req = requirement.split(";"); let data = Object.keys(formData[index].answer); let arr = []; let res; for (let i = 0; i < data.length; i++) { res = req.includes(data[i]) ? data[i] : ""; arr.push(res); } if ( arr.length === 4 && arr.every((elem) => formData[index].answer.hasOwnProperty(elem)) ) { survey_mar.classList.remove("form-error"); dontSubmit = true; } } else { errorElement.setAttribute("role", "alert"); survey_mar.classList.add("form-error"); } } function updateProgressbarBar() { const index = currentPanel.dataset.index; let currentQuestion = formData[`${parseFloat(index)}`].question; progressbar.setAttribute("aria-valuenow", index); progressbar.setAttribute("aria-valuetext", currentQuestion); progressbarStep[index].classList.remove("active"); } var wasCalledPageMr2 = false; var wasCalledPageMr7 = false; function displayNextPanel() { currentPanel.classList.remove("survey__panel--current"); currentPanel.setAttribute("aria-hidden", true); currentPanel = currentPanel.nextElementSibling; currentPanel.classList.add("survey__panel--current"); currentPanel.setAttribute("aria-hidden", false); updateProgressbar(); if (+currentPanel.dataset.index > 1) { prevButton.disabled = false; prevButton.setAttribute("aria-hidden", false); titleFinalProgress.classList.remove("none_title"); } if (+currentPanel.dataset.index === 2) { if (wasCalledPageMr2 !== true) { wasCalledPageMr2 = true; ym(98017040,'reachGoal','STAT_MR_2'); // stat mr } } if (+currentPanel.dataset.index === 7) { nextButton.disabled = true; nextButton.setAttribute("aria-hidden", true); submitButton.disabled = false; submitButton.setAttribute("aria-hidden", false); titleFinalProgress.classList.add("none_title"); if (wasCalledPageMr7 !== true) { wasCalledPageMr7 = true; ym(98017040,'reachGoal','STAT_MR_7'); // stat mr } } } function displayPrevPanel() { currentPanel.classList.remove("survey__panel--current"); currentPanel.setAttribute("aria-hidden", true); currentPanel = currentPanel.previousElementSibling; currentPanel.classList.add("survey__panel--current"); currentPanel.setAttribute("aria-hidden", false); updateProgressbarBar(); if (+currentPanel.dataset.index === 1) { prevButton.disabled = true; prevButton.setAttribute("aria-hidden", true); } if (+currentPanel.dataset.index < 7) { nextButton.disabled = false; nextButton.setAttribute("aria-hidden", false); submitButton.disabled = true; submitButton.setAttribute("aria-hidden", true); titleFinalProgress.classList.remove("none_title"); } } function handleprevButton() { displayPrevPanel(); } function handleNextButton() { const index = currentPanel.dataset.index; if (!formData[index].hasOwnProperty("answer")) { checkRequirements(); displayNextPanel(); } else { noErrors(); displayNextPanel(); } } // submitting the form function handleFormSubmit(e) { checkRequirements(); if (!dontSubmit) { e.preventDefault(); } else { mainElement.classList.add("submission"); mainElement.setAttribute("role", "alert"); mainElement.innerHTML = `

Спасибо!

Формы успешно были заполнены и отправлены`; return false; } } storeInitialData(); // Add event listeners function addListenersTo({ question1Radios, question2Radios, question7Radios, question3CheckBoxes, question4Radios, question5Radios, myName5input, ...inputs }) { question1Radios.forEach((elem) => elem.addEventListener("change", updateFormData) ); question2Radios.forEach((elem) => elem.addEventListener("change", updateFormData) ); question7Radios.forEach((elem) => elem.addEventListener("change", updateFormData) ); question3CheckBoxes.forEach((elem) => elem.addEventListener("change", updateFormData) ); question4Radios.forEach((elem) => elem.addEventListener("change", updateFormData) ); question5Radios.forEach((elem) => elem.addEventListener("change", updateFormData) ); myName5input.forEach((elem) => elem.addEventListener("change", updateFormData) ); let { } = inputs; } nextButton.addEventListener("click", handleNextButton); prevButton.addEventListener("click", handleprevButton); addListenersTo(options); survey_mar.addEventListener("submit", handleFormSubmit); } const survey_mar = Survey_mar(document.querySelector(".survey_marquiz")); /* ACTION SENDING ON MAINCONTROLLER */ $(document).ready(function(){ $('[data-action="feedback_quiz"]').click(function(){ return sender_feedbackQuiz($('[data-form="feedback_quiz"]'), function() { $('[data-form="feedback_quiz"]')[0].reset(); location.href = '/send/?act=feedback_quiz'; }); }); function sender_feedbackQuiz(feedbackQuiz, successCallback) { var name = feedbackQuiz.find('[name="namequiz"]').val(); var city = feedbackQuiz.find('[name="cityquiz"]').val(); var cat = feedbackQuiz.find('[name="catquiz"]').val(); var phone = feedbackQuiz.find('[name="question_1"]:checked').val(); var title = feedbackQuiz.find('[name="question_2"]:checked').val(); var materials = feedbackQuiz.find('[name="question_7"]:checked').val(); var email = feedbackQuiz.find('[name="question_6"]').val(); var files = feedbackQuiz.find('[name="question_3"]:checked').val(); var detail = feedbackQuiz.find('[name="question_4"]:checked').val(); var messenger = feedbackQuiz.find('[name="question_5"]:checked').val(); var link = feedbackQuiz.find('[name="messquiz"]:checked').val(); var errors = 0; if (email.length < 3) { $errors++; feedbackQuiz.find('[name="question_6"]').addClass('error'); feedbackQuiz.find('[name="question_6"]').parent().addClass('error'); } else { feedbackQuiz.find('[name="question_6"]').removeClass('error'); feedbackQuiz.find('[name="question_6"]').parent().removeClass('error'); } if (errors > 0) { return false; } $.ajax({ url: "/ajax/feedbackQuiz/", type: 'POST', data: { name:name, email:email, phone:phone, title:title, materials:materials, detail:detail, city:city, cat:cat, files:files, messenger:messenger, link:link, message:feedbackQuiz.find('[name="message"]').val() }, dataType: 'JSON', success: function(data) { successCallback(); }, error: function(xhr, status) { } }); return false; } $('#close_success').click(function(){ $(this).parent().parent().fadeOut('fast'); }); }); /* MR ACTION SENDING ON MAINCONTROLLER */ $(document).ready(function(){ $('[data-action="feedback_marquiz"]').click(function(){ return sender_feedbackQuizMr($('[data-form="feedback_marquiz"]'), function() { $('[data-form="feedback_marquiz"]')[0].reset(); location.href = '/send/?act=feedback_marquiz'; }); }); function sender_feedbackQuizMr(feedbackQuizMr, successCallback) { var name = feedbackQuizMr.find('[name="namequiz"]').val(); var city = feedbackQuizMr.find('[name="cityquiz"]').val(); var cat = feedbackQuizMr.find('[name="catquiz"]').val(); var phone = feedbackQuizMr.find('[name="question_1"]:checked').val(); var title = feedbackQuizMr.find('[name="question_2"]:checked').val(); var materials = feedbackQuizMr.find('[name="question_7"]:checked').val(); var email = feedbackQuizMr.find('[name="question_6"]').val(); var files = feedbackQuizMr.find('[name="question_3"]:checked').val(); var detail = feedbackQuizMr.find('[name="question_4"]:checked').val(); var messenger = feedbackQuizMr.find('[name="question_5"]:checked').val(); var link = feedbackQuizMr.find('[name="messquiz"]:checked').val(); var errors = 0; if (email.length < 3) { $errors++; feedbackQuizMr.find('[name="question_6"]').addClass('error'); feedbackQuizMr.find('[name="question_6"]').parent().addClass('error'); } else { feedbackQuizMr.find('[name="question_6"]').removeClass('error'); feedbackQuizMr.find('[name="question_6"]').parent().removeClass('error'); } if (errors > 0) { return false; } $.ajax({ url: "/ajax/feedbackQuizMr/", type: 'POST', data: { name:name, email:email, phone:phone, title:title, materials:materials, detail:detail, city:city, cat:cat, files:files, messenger:messenger, link:link, message:feedbackQuizMr.find('[name="message"]').val() }, dataType: 'JSON', success: function(data) { successCallback(); }, error: function(xhr, status) { } }); return false; } $('#close_success').click(function(){ $(this).parent().parent().fadeOut('fast'); }); }); /* once triger quiz stat */ var wasCalledCalculator = false; function initializeFancybox() { $(".btn_popup").fancybox({ 'hideOnContentClick': true, afterShow: function (instance, current) { if ($(current.src).is("#calculator")) { if (!wasCalledCalculator) { ym(98017040,'reachGoal','STAT_LD_1'); // stat wasCalledCalculator = true; } } } }); } /* initialize */ $(document).ready(function(){ initializeFancybox(); });