Bootstrap 4 Форма с валидацией и AJAX
На сайте есть две формы обратной связи на одной странице (одна в подвале, другая в модальном окне). Обе сделаны на bootstrap 4 с валидацией данных и ajax отправлением письма. Проблема в том, что при отправке письма с одной формы на почту прилетает два письма, одно с данными, второе пустое (без данных, только шаблон письма). Почему происходит дубль и какие ошибки есть/рекомендации/оптимизацию и упрощение кода посоветуете? Спасибо.
HTML-код 1-й формы
<form action="/send.php" method="post" id="form-callback" class="needs-validation" novalidate>
<div class="form-group required">
<label for="callback-name" class="sr-only">Введите ваше имя</label>
<input type="text" id="callback-name" class="form-control" name="name" aria-required="true" placeholder="Ваше имя" minlength="3" required>
<div class="invalid-feedback">
Введите ваше имя
</div>
</div>
<div class="form-group required">
<label for="callback-phone" class="sr-only">Ваш телефон</label>
<input type="tel" id="callback-phone" class="form-control" name="phone" aria-required="true" placeholder="Ваш телефон" minlength="7" required>
<div class="invalid-feedback">
Введите ваш номер телефона
</div>
</div>
<div class="form-group">
<label for="callback-comment" class="sr-only">Сообщение</label>
<textarea id="callback-comment" class="form-control" name="message" rows="6" placeholder="Сообщение"></textarea>
</div>
<button type="submit" id="callback-submit" class="btn btn-red btn-block font-weight-bold text-uppercase">
<span id="callback-submit-text">Отправить</span>
<i class="fas fa-circle-notch fa-spin d-none"></i>
<i class="fas fa-check d-none"></i>
</button>
</form>
send.js
jQuery(document).ready(function ($) {
$('#callback-phone').mask('+7 (999) 999-99-99');
'use strict';
window.addEventListener('load', function () {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === !1) {
event.preventDefault();
event.stopPropagation()
}
form.classList.add('was-validated');
if (form.checkValidity() === !0) {
event.preventDefault();
var name = $("#callback-name").val();
var phone = $("#callback-phone").val();
var message = $("#callback-comment").val();
$.ajax({
type: "POST",
url: "/send.php",
data: "name=" + name + "&phone=" + phone + "&message=" + message,
success: function (text) {
if (text == "success") {} else {}
}
});
document.getElementById("callback-submit-text").innerHTML = "Отправление";
$("#callback-submit svg.fa-circle-notch").removeClass("d-none");
$("#callback-submit svg.fa-circle-notch").addClass("d-inline-block");
setTimeout(function () {
$("#callback-submit").removeClass("btn-red");
$("#callback-submit").addClass("btn-green");
document.getElementById("callback-submit-text").innerHTML = "Отправлено";
$("#callback-submit svg.fa-circle-notch").removeClass("d-inline-block");
$("#callback-submit svg.fa-circle-notch").addClass("d-none");
$("#callback-submit svg.fa-check").removeClass("d-none");
$("#callback-submit svg.fa-check").addClass("d-inline-block")
}, 2000);
setTimeout(function () {
$('#callback').modal('hide');
document.getElementById("callback-name").value = "";
document.getElementById("callback-phone").value = "";
document.getElementById("callback-comment").value = "";
$("#callback-submit").removeClass("btn-green");
$("#callback-submit").addClass("btn-red");
document.getElementById("callback-submit-text").innerHTML = "Отправить";
$("#callback-submit svg.fa-check").removeClass("d-inline-block");
$("#callback-submit svg.fa-check").addClass("d-none")
}, 4000)
}
}, !1)
})
}, !1)
})
send.php
<?php
$name = $_POST['name'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$mail = "Имя: $name \n Телефон: $phone \n Сообщение: $message";
$to = "[email protected]";
$from = "[email protected]";
$subject = "Новая заявка с сайта";
$headers = "From: $from\r\nReply-To: $to\r\nContent-type: text/html; charset=utf-8\r\n";
mail($to, $subject, $mail, $headers)
?>
HTML-код 2-й формы
<form action="/send-feedback.php" method="post" id="form-feedback" class="needs-validation" novalidate>
<div class="form-row">
<div class="col">
<div class="form-group required">
<label for="feedback-name" class="sr-only">Введите ваше имя</label>
<input type="text" id="feedback-name" class="form-control" name="feedback-name" aria-required="true" placeholder="Ваше имя" minlength="3" required>
<div class="invalid-feedback">
Введите ваше имя
</div>
</div>
</div>
<div class="col">
<div class="form-group required">
<label for="feedback-phone" class="sr-only">Ваш телефон</label>
<input type="tel" id="feedback-phone" class="form-control" name="feedback-phone" aria-required="true" placeholder="Ваш телефон" minlength="7" required>
<div class="invalid-feedback">
Введите ваш номер телефона
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="feedback-comment" class="sr-only">Сообщение</label>
<textarea id="feedback-comment" class="form-control" name="feedback-message" rows="6" placeholder="Сообщение"></textarea>
</div>
<button type="submit" id="feedback-submit" class="btn btn-lg btn-red text-uppercase font-weight-bold">
<span id="feedback-submit-text">Отправить</span>
<i class="fas fa-circle-notch fa-spin d-none"></i>
<i class="fas fa-check d-none"></i>
</button>
</form>
send-feedback.js
jQuery(document).ready(function ($) {
$('#feedback-phone').mask('+7 (999) 999-99-99');
'use strict';
window.addEventListener('load', function () {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === !1) {
event.preventDefault();
event.stopPropagation()
}
form.classList.add('was-validated');
if (form.checkValidity() === !0) {
event.preventDefault();
var name = $("#feedback-name").val();
var phone = $("#feedback-phone").val();
var message = $("#feedback-comment").val();
$.ajax({
type: "POST",
url: "/send-feedback.php",
data: "feedback-name=" + name + "&feedback-phone=" + phone + "&feedback-message=" + message,
success: function (text) {
if (text == "success") {} else {}
}
});
document.getElementById("feedback-submit-text").innerHTML = "Отправление";
$("#feedback-submit svg.fa-circle-notch").removeClass("d-none");
$("#feedback-submit svg.fa-circle-notch").addClass("d-inline-block");
setTimeout(function () {
$("#feedback-submit").removeClass("btn-red");
$("#feedback-submit").addClass("btn-green");
document.getElementById("feedback-submit-text").innerHTML = "Отправлено";
$("#feedback-submit svg.fa-circle-notch").removeClass("d-inline-block");
$("#feedback-submit svg.fa-circle-notch").addClass("d-none");
$("#feedback-submit svg.fa-check").removeClass("d-none");
$("#feedback-submit svg.fa-check").addClass("d-inline-block")
}, 2000);
setTimeout(function () {
document.getElementById("feedback-name").value = "";
document.getElementById("feedback-phone").value = "";
document.getElementById("feedback-comment").value = "";
$("#feedback-submit").removeClass("btn-green");
$("#feedback-submit").addClass("btn-red");
document.getElementById("feedback-submit-text").innerHTML = "Отправить";
$("#feedback-submit svg.fa-check").removeClass("d-inline-block");
$("#feedback-submit svg.fa-check").addClass("d-none")
}, 4000)
}
}, !1)
})
}, !1)
})
send-feedback.php
<?php
$name = $_POST['feedback-name'];
$phone = $_POST['feedback-phone'];
$message = $_POST['feedback-message'];
$mail = "Имя: $name \n Телефон: $phone \n Сообщение: $message";
$to = "[email protected]";
$from = "[email protected]";
$subject = "Новая заявка с сайта";
$headers = "From: $from\r\nReply-To: $to\r\nContent-type: text/html; charset=utf-8\r\n";
mail($to, $subject, $mail, $headers)
?>