tony-stark77
@tony-stark77
Frontend developer (senior+)

Не работает две формы обратной связи на сайте?

form 1

<form class="form" id="form" action="#">
									<div class="section__form__d">
										<div class="section__form__name">
											<span>ВЫЗВАТЬ МАСТЕРА</span>
										</div>
										<div class="section__form__des">
											<span>
												Заполните форму и мы свяжемся с вами в течении 10 минут!
											</span>
										</div>
									</div>
									<div class="section__form__input">
										<div class="form__name">
											<input
												class="input _req"
												type="text"
												placeholder="Ваше имя *"
											/>
										</div>
										<div class="form__tel">
											<input
												class="input _req"
												type="text"
												placeholder="Телефон *"
											/>
										</div>
										<div data-type="checkbox">
											<label class="ladel">
												<input
													class="checkbox _req"
													type="checkbox"
													checked
													value="Ознакомлен(на) с пользовательским соглашением"
												/>
												<span class="checkbox__l">
													Ознакомлен(на) с пользовательским соглашением
												</span>
											</label>
										</div>
										<button class="btn">
											<span class="btn__1">Отправить заявку</span>
										</button>
									</div>
								</form>



form 2

<form class="form" id="form" action="#">
							<div class="popup__text">
								<input
									type="text"
									class="popup__input _req"
									placeholder="Ваше имя *"
								/>
								<input
									type="text"
									class="popup__input _req"
									placeholder="Телефон *"
								/>
								<textarea
									class="popup__textarea"
									name="popup__textarea"
									id="popup__textarea"
									placeholder="Комментарий"
								></textarea>
								<div class="popup__checkbox" data-type="checkbox">
									<label class="popup__label">
										<input
											value="Ознакомлен(на) с пользовательским соглашением"
											type="checkbox"
											name=""
											id=""
											class="_req"
										/>
										<span class="popup__span">
											Ознакомлен(на) с пользовательским соглашением
										</span>
									</label>
								</div>
								<button class="popup__btn">
									<span class="popup__btn__span">Отправить заявку</span>
								</button>
							</div>
						</form>



js

"use strict"

document.addEventListener('DOMContentLoaded', function () {
  const form = document.getElementById('form');
  form.addEventListener('submit', formSend);
  
  async function formSend(e) {
    e.preventDefault();

    let error = formValidate(form);

    let formData = new FormData(form);
    
    if (error === 0) {
      form.classList.add('_sending');
      let response = await fetch("sendmail.php", {
        method: 'POST',
        body: formData
      });
      if (response.ok) {
        let result = await response.json();
        alert(result.message);
        form.reset();
        form.classList.remove('_sending');
      } else {
        form.classList.remove('_sending');
        alert("Ошибка")
      }      
    } else {
      alert('Заполните обязательное поле');
    }
  }

  function formValidate(form) {
    let error = 0;
    let formReq = form.querySelectorAll('._req');
    
    for (let index = 0; index < formReq.length; index++) {
      const input = formReq[index];      
      formRemoveError(input);

      if (input.getAttribute("type") === "checkbox" && input.checked === false) {
        formAddError(input);
        error++;
      } else {
        if (input.value === '') {
          formAddError(input);
          error++;
        }
      }

      if (input.value === '') {
        formAddError(input);
        error++;
      }
    }
    return error;
  }

  function formAddError(input) {
    input.parentElement.classList.add('_error');
    input.classList.add('_error');
  }  
  function formRemoveError(input) {
    input.parentElement.classList.remove('_error');
    input.classList.remove('_error');
  }
});



С первой формой всё хорошо, всё отправляется а вот со второй проблемы, страница перезагружается... что делать?
  • Вопрос задан
  • 283 просмотра
Решения вопроса 1
mahmudchon
@mahmudchon
У Вас обе формы одновременно на 1 странице? Если это так, то на одной странице не должно быть 2 формы с одинаковым id, в даном случае #form.
id должен быть уникальным.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы