https://amcclinic.ru/local/templates/.default/script.js

1window.onload = function(){
2  /*=============== MODAL ===============*/
3  const modalBody = document.querySelector('.tax__body');
4  const modalButtons = document.querySelector('.js-nalog-open');
5  const modalButtons1 = document.querySelector('.js-nalog-open1');
6  const modalContent = document.querySelector('.tax__content');
7  const modalClose = document.querySelector(".tax__close");
8  const errorBlock = document.querySelectorAll('.js-error');
9  const modalInputs = document.querySelectorAll(".tax input");
10  const taxDeliveryYes = document.querySelector("#tax-delivery-yes");
11  const taxDeliveryNo = document.querySelector("#tax-delivery-no");
12  // const diliveryFlag = document.querySelector('input[name="tax-delivery"]');
13
14  // var inp = document.getElementsByName('tax-delivery');
15  // for (var i = 0; i < inp.length; i++)
16  // {
17  //     if (inp[i].type == "radio")
18  //     {
19  //       if(inp[i].value == 1)
20  //       {
21  //         document.querySelector("#tax-postal").closest('.wrapper__postal').style.display = "block";
22  //       }
23  //       else
24  //       {
25  //         document.querySelector("#tax-postal").closest('.wrapper__postal').style.display = "none";
26  //       }
27  //     }
28  // }
29  /*
30  const delivery = document.querySelectorAll('input[name="tax-delivery"]')
31  for (const f of delivery) {
32    if (f.checked) {
33      console.log(f.value)
34    }
35  }
36  diliveryFlag.addEventListener("click", (e) => {
37    for (const f of delivery) {
38      if (f.checked) {
39        if(f.value == 1)
40        {
41          document.querySelector("#tax-postal").closest('.wrapper__postal').style.display = "block";
42        }
43        else
44        {
45          document.querySelector("#tax-postal").closest('.wrapper__postal').style.display = "none";
46        }
47      }
48    }
49  });
50  */
51
52  taxDeliveryYes.addEventListener("click", (e) => {
53    document.querySelector("#tax-postal").closest('.wrapper__postal').style.display = "block";
54    document.querySelector("#tax-postal").setAttribute('data-type', 'text');
55  });
56
57  taxDeliveryNo.addEventListener("click", (e) => {
58    document.querySelector("#tax-postal").closest('.wrapper__postal').style.display = "none";
59    document.querySelector("#tax-postal").removeAttribute('data-type');
60  });
61
62  document.querySelector("#tax-postal").closest('.wrapper__postal').style.display = "none";
63
64  if(modalButtons) {
65    modalButtons.addEventListener("click", (e) => {
66    document.body.classList.add("_lock");
67    modalBody.classList.add("_active");
68    modalContent.classList.add("_active");
69    });
70  }
71
72  if(modalButtons1) {
73    modalButtons1.addEventListener("click", (e) => {
74    e.preventDefault();
75    document.body.classList.add("_lock");
76    modalBody.classList.add("_active");
77    modalContent.classList.add("_active");
78    });
79  }
80
81  if (modalClose) {
82    modalClose.addEventListener("click", (e) => {
83      document.body.classList.remove("_lock");
84      modalBody.classList.remove("_active");
85      modalContent.classList.remove("_active");
86      errorBlock.forEach((item) => {
87        item.classList.remove("_active")
88      }
89      );
90      modalInputs.forEach(input => {
91        input.value = "";
92      });
93    });
94  }
95  /*=============== SUCES ===============*/
96  const sucesBody = document.querySelector('.suces__body');

97  const sucesContent = document.querySelector('.suces__content');
98  const sucesClose = document.querySelector('.js-close-modal');
99    function sucesOpen() {
100      sucesBody.classList.add('_active');
101      sucesContent.classList.add('_active');
102      document.body.classList.add('_lock');
103  }
104
105    if(sucesClose) {
106      sucesClose.addEventListener("click" , (e) => {
107      sucesBody.classList.remove("_active");
108      sucesContent.classList.remove('_active');
109      document.body.classList.remove('_lock');
110  })
111  }
112  /*=============== AXIOS ===============*/
113  function validatePhone(phone)  {
114    const cleanedPhone = phone.replace(/\D/g, "");
115    console.log(new String(cleanedPhone).length)
116    console.log(cleanedPhone.length === 11, "partial")
117
118    if(cleanedPhone.length === 11) {
119      return true;
120    } else {
121      return false;
122    }
123  }
124  function validateEmail(email) {
125    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
126    return emailRegex.test(email);
127  }
128
129  function validateText(text)  {
130    const trimmedText = text.trim();
131
132      if (trimmedText.length >= 2) {
133      return true;
134    } else {
135      return false;
136    }
137  }
138
139  function validateInn(inn) {
140    const trimmedText = inn.trim();
141    console.log(trimmedText.length);
142
143    if (trimmedText.length === 12) {
144      return true;
145    } else {
146      return false;
147    }
148  }
149
150  function noValidate(value) {
151    return true;
152  }
153
154  const validate = (input) => {
155    const dataType = input.getAttribute("data-type");
156    console.log(dataType);
157
158      let res = true;
159      switch(dataType) {
160        case "phone":
161        res = validatePhone(input.value)
162        break;
163        case "text":
164        res = validateText(input.value)
165        break;
166        case "email":
167        res = validateEmail(input.value);
168        break;
169        case "inn":
170        res = validateInn(input.value);
171        break;
172        case "novalidate":
173        res = noValidate(input.value);
174        break;
175    }
176
177    console.log(input, res, dataType)
178    return res;
179  }
180
181  let forms = document.querySelectorAll('.js-form');
182  console.log(forms)
183  forms.forEach((form) => {
184    let formButton = form.querySelector(".js-form-submit");
185  	console.log(formButton)
186  	if(formButton) {
187  		formButton.addEventListener("click", (e) => {
188  		e.preventDefault();
189  		formButton.disabled = true;
190  		const inputs = form.querySelectorAll(".tax__input input, textarea");
191  		const method = form.method;
192  		const action = form.action;
193  		let isValidated = false;
194  		let formData = [];
195
196  		inputs.forEach(input => {
197        if(input.value)
198        {
199          formData.push({
200            name: input.name,
201            value: input.value,
202            isValidate: validate(input),
203          })
204        }
205    })
206
207  	formData.forEach(item => {
208      const input = form.querySelector(`[name="${item.name}"]`);
209      const wrapper = input.parentNode;
210      const errorBlock = wrapper.querySelector('.js-error');
211
212      console.log(item.isValidate);
213
214      if(!item.isValidate) {
215          isValidated = false;
216          errorBlock.classList.add("_active")
217          wrapper.classList.add("_active")
218      } else {
219          errorBlock.classList.remove("_active");
220          wrapper.classList.remove("_active")
221      }
222    })
223
224  	if(!isValidated) {
225      formButton.disabled = false;
226      return false;
227    }
228
229  	axios({
230  		method,
231  		url: action,
232  		data: formData,
233  }).then((response) => {
234      sucesOpen();
235  		console.log("success");
236      document.body.classList.remove("_lock");
237  		formButton.disabled = false;
238      modalBody.classList.remove("_active");
239      modalContent.classList.remove("_active");
240        // Очистка полей ввода
241      inputs.forEach(input => {
242        input.value = "";
243      });
244  }).catch((error) => {
245  		console.error(error);
246      document.body.classList.remove("_lock");
247      modalBody.classList.remove("_active");
248       modalContent.classList.remove("_active");
249      sucesOpen();
250  		formButton.disabled = false;
251      inputs.forEach(input => {
252        input.value = "";
253      });
254  	});
255  })
256  	}
257  })
258};