https://thisispivbar.ua/js/rscripts.js

1
2
3//---------------ОБРАБОТКА ФОРМ------------------------------------------
4
5
6document.querySelectorAll(".gsheets").forEach(item => {
7
8    // Маска для телефона
9    var eventCalllback = function (e) {
10        var el = e.target,
11            clearVal = el.dataset.phoneClear,
12            pattern = el.dataset.phonePattern,
13            matrix_def = "+380 __ ___ __ __",
14            matrix = pattern ? pattern : matrix_def,
15            i = 0,
16            def = matrix.replace(/\D/g, ""),
17            val = e.target.value.replace(/\D/g, "");
18        if (clearVal !== 'false' && e.type === 'blur') {
19            if (val.length < matrix.match(/([\_\d])/g).length) {
20                e.target.value = '';
21                return;
22            }
23        }
24        if (def.length >= val.length) val = def;
25        e.target.value = matrix.replace(/./g, function (a) {
26            return /[_\d]/.test(a) && i < val.length ? val.charAt(i++) : i >= val.length ? "" : a
27        });
28    }
29
30    var phone_inputs = document.querySelectorAll('[data-phone-pattern]');
31    for (let elem of phone_inputs) {
32        for (let ev of ['input', 'blur', 'focus']) {
33            elem.addEventListener(ev, eventCalllback);
34        }
35    }
36    // -------- 
37
38    // САБМИТ ФОРМЫ
39    item.addEventListener('submit', function (event) {
40        var form = this;
41        event.preventDefault();
42        console.log('форма submited');
43        
44
45        let error = formValidate(form);
46        let magnificPopup = $.magnificPopup.instance;
47        let resultFormPreloader = document.querySelector('#result-form__preloader');
48        let resultFormThanks = document.querySelector('#result-form__thanks');
49        let resultFormError = document.querySelector('#result-form__error');
50        const appLink = "https://script.google.com/macros/s/AKfycby0R_PfVV3hn2f5cK_Bb8tfnoeQAaT3Xgzwtgk98Td-It2KkOt8Co1L6hZFJjXHVUWC/exec";
51       
52
53        // FormData
54        let fd = new FormData(form);		
55		 
56// Преобразуем FormData в объект
57let formDataObj = {};
58fd.forEach((value, key) => {
59    formDataObj[key] = value;
60});
61
62// Сортируем объект по ключам
63let sortedEntries = Object.entries(formDataObj).sort(([a], [b]) => a.localeCompare(b));
64
65// Выводим отсортированные данные в консоль
66console.log('Отсортированные данные формы:');
67sortedEntries.forEach(([key, value]) => {
68    console.log(`${key}: ${value}`);
69});
70let sortedFd = new FormData();
71sortedEntries.forEach(([key, value]) => {
72    sortedFd.append(key, value);
73});
74
75		
76        // если проверка формы вернула 0 (нет ошибок)
77        if (error === 0) {
78            // Отправка формы
79            $.ajax({
80                url: appLink,
81                type: "POST",				
82                data: sortedFd,
83				processData: false,
84                contentType: false,
85                beforeSend: function () {
86                    if (sortedFd.get('honeypot').length) {
87                        return false;
88                    } else {
89                        sortedFd.delete('honeypot');
90                    }
91                    magnificPopup.close();                    
92                    console.log('закрываем попап');
93                    $.magnificPopup.open({
94                        items: { src: '#result-form__preloader' },
95                        type: 'inline'
96
97                    });
98                    console.log('открываем попап result-form__preloader');
99                    resultFormPreloader.classList.add("_nohidden");
100                    console.log(' result-form__preloader _nohidden');
101                    
102                },
103
104            }).done(function (res, textStatus, jqXHR) {
105                if (jqXHR.readyState === 4 && jqXHR.status === 200) {
106                    console.log('форма отправлена');
107                    magnificPopup.close();
108                    $.magnificPopup.open({
109                        items: { src: '#result-form__thanks' },
110                        type: 'inline'
111                    });
112                    resultFormPreloader.classList.remove("_nohidden");
113                    console.log('открываем попап #result-form__thanks');
114                    resultFormThanks.classList.add("_nohidden");
115                    console.log(form);
116                    form.reset();
117
118                } else {
119                    console.log('Гугл не ответил статусом 200');
120                    magnificPopup.close();
121                    $.magnificPopup.open({
122                        items: { src: '#result-form__error' },
123                        type: 'inline'
124                    });
125                    resultFormError.classList.add("_nohidden")
126                }
127            }).fail(function (res, textStatus, jqXHR) {
128                console.log('Не вдалося виконати запит за вказаним у скрипті шляхом');
129                magnificPopup.close();
130                $.magnificPopup.open({
131                    items: { src: '#result-form__error' },
132                    type: 'inline'
133                });
134                resultFormError.classList.add("_nohidden")
135            });
136        }
137        // если есть ошибки при проверке формы 
138        else {
139            console.log('есть ошибки при проверке формы ');
140        }
141    });
142});
143
144function formValidate(form) {
145    let error = 0;
146    let formReq = form.querySelectorAll('._required');
147    console.log('запуск проверки формы' + form);
148    console.log(formReq);
149    console.log('---------------------------');
150

151    // создаем цикл для проверки каждого объекта в formReq
152    for (let index = 0; index < formReq.length; index++) {
153        const input = formReq[index]; // в переменную загоняем каждый объект 
154        formRemoveError(input); // функция - изначально убираем класс _error для объекта     
155        // ПРОВЕРКА заполненности обязательных текстовых полей
156        if (input.classList.contains("_required") && (input.value === "")) {
157            formAddError(input); 	 // добавляем класс _error для объекта
158            error++;				// увеличиваем на 1 переменную error   
159        }
160
161        // ПРОВЕРКА телефона
162        else if (input.getAttribute("type") === "tel") {
163
164            if (phoneTest(input)) { // если функция phoneTest(input) не прошла
165                formAddError(input);
166                error++;
167            }
168        }
169
170        // ПРОВЕРКА даты
171        else if (input.getAttribute("type") === "date") {
172            const selectedDate = new Date(input.value);
173            const today = new Date();
174            const maxDate = new Date();
175            maxDate.setMonth(maxDate.getMonth() + 1);
176
177            // Очищаем часы для сравнения только по дате
178            selectedDate.setHours(0, 0, 0, 0);
179            today.setHours(0, 0, 0, 0);
180            maxDate.setHours(0, 0, 0, 0);
181
182            if (selectedDate < today || selectedDate > maxDate) {
183                formAddError(input);
184                error++;
185            }
186        }
187    }
188    //из функции проверки возвращаем значение переременной error (либо 0, либо >0)
189    return error;
190
191    function formAddError(input) {// функция добавляет класс _error для объекта 
192        input.classList.add("_error");
193    }
194    function formRemoveError(input) {// функция убирает класс _error для объекта 
195        input.classList.remove("_error");
196    }
197    function phoneTest(input) {
198        const cleaned = input.value.trim().replace(/\s+/g, ' ');
199        return !/\+\d{3} \d{2} \d{3} \d{2} \d{2}/.test(cleaned);
200    }
201
202}
203
204document.querySelectorAll("._required").forEach(item => { //убираем _error при клике на инпут 
205    item.addEventListener('click', function (event) {
206        item.classList.remove("_error");
207    });
208});
209//------------
210
211
212
213$(document).ready(function () {
214
215    //----------------------------попап -------------
216    if (document.querySelector("#callpopup")) {
217        $('.popup_activate').magnificPopup({
218
219            items: {
220                src: '#callpopup',
221                type: 'inline'
222            },
223            callbacks: {
224                open: function () {
225                    $('#callpopup').show();
226                },
227                close: function () {
228                    $('#callpopup').hide();
229                }
230            },
231            closeBtnInside: true
232        });
233
234        $(document).on('click', '.mfp-close', function () {
235            $(this).closest('.result-form').removeClass('_nohidden');
236            $.magnificPopup.close();
237          });
238
239
240    }
241});
242
243///------------------ При загрузке страницы найдём поле #date и установим ему атрибуты min и max в нужных пределах.
244
245document.addEventListener("DOMContentLoaded", function () {
246    const dateInput = document.getElementById("date");
247    if (dateInput) {
248        const today = new Date();
249        const maxDate = new Date();
250        maxDate.setMonth(maxDate.getMonth() + 1);
251
252        const formatDate = (date) => {
253            const year = date.getFullYear();

254            const month = String(date.getMonth() + 1).padStart(2, '0');
255            const day = String(date.getDate()).padStart(2, '0');
256            return `${year}-${month}-${day}`;
257        };
258
259        dateInput.min = formatDate(today);
260        dateInput.max = formatDate(maxDate);
261    }
262});