Не работает две формы обратной связи на сайте?
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 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> |
<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'); } }); |
"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'); } });
С первой формой всё хорошо, всё отправляется а вот со второй проблемы, страница перезагружается... что делать?
Дополнительно:
Чо, серьёзно? Может, всё-таки не "senior+"? - скорее уж "trainee--", судя по вопросу.
У Вас обе формы одновременно на 1 странице? Если это так, то на одной странице не должно быть 2 формы с одинаковым id, в даном случае #form.
id должен быть уникальным.
- Хорошо, а как тогда находить эту форму в js? Работать же не будет если поменять id?
- Nayro TV, кто сказал?
Ловите сабмит формы на документе.document.addEventListener('submit', function(e){ e.preventDefault(); let form = e.target; /** * Обрабатываете форму и отправляете **/ return !1; });
document.addEventListener('submit', function(e){ e.preventDefault(); let form = e.target; /** * Обрабатываете форму и отправляете **/ return !1; });
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы решить проблему с неработающими формами обратной связи на сайте, следует выполнить несколько шагов:
1. Проверить наличие ошибок в коде:
- Первым делом необходимо убедиться, что код формы обратной связи написан корректно. Проверьте правильность использования атрибутов и методов передачи данных.
- Убедитесь, что все необходимые файлы, такие как скрипты обработки формы, подключены правильно и доступны на сервере.
2. Проверить права доступа к файлам и папкам:
- Удостоверьтесь, что права доступа к файлам и папкам, связанным с формой обратной связи, установлены правильно. Необходимо убедиться, что сервер имеет доступ на запись в папку, куда отправляются данные формы.
3. Проверить конфигурацию сервера:
- Проверьте настройки сервера, такие как отправка почты и работа с формами. Убедитесь, что сервер правильно настроен для отправки электронных писем.
4. Проверить наличие блокировок:
- Иногда формы могут быть заблокированы вашим хостинг-провайдером или антивирусным программным обеспечением на вашем компьютере. Убедитесь, что формы не блокируются каким-либо программным обеспечением.
5. Проверить логи ошибок:
- Просмотрите логи ошибок на сервере, чтобы выявить возможные проблемы с отправкой данных формы. Логи могут содержать полезную информацию о том, что именно пошло не так.
Если после выполнения всех перечисленных шагов проблема с неработающими формами обратной связи на сайте не решится, рекомендуется обратиться к специалисту по веб-разработке или к службе поддержки вашего хостинг-провайдера для дальнейшей диагностики и устранения неполадок.