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

Question

[Nayro TV]

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');
  }
});

С первой формой всё хорошо, всё отправляется а вот со второй проблемы, страница перезагружается... что делать?

Comments

[0xD34F]

Чо, серьёзно? Может, всё-таки не "senior+"? - скорее уж "trainee--", судя по вопросу.

[Nayro TV]

0xD34F, Обидно(

[0xD34F]

Nayro TV, себе можете врать сколько угодно, а другим-то зачем? - уберите этого senior'a, не позорьтесь.

[Nayro TV]

0xD34F, Да я понимаю что я не senior а джун джуна джуна но для прикола вставил... что такого?))

Answer 1

[mahmudchon]

У Вас обе формы одновременно на 1 странице? Если это так, то на одной странице не должно быть 2 формы с одинаковым id, в даном случае #form.
id должен быть уникальным.

Comments

[Nayro TV]

Хорошо, а как тогда находить эту форму в js? Работать же не будет если поменять id?

[ProjectSoft]

Nayro TV, кто сказал?
Ловите сабмит формы на документе.

document.addEventListener('submit', function(e){
    e.preventDefault();
    let form = e.target;
    /**
     * Обрабатываете форму и отправляете
    **/
    return !1;
});