I have a form on the website that was supposedly working before the design changes. A captcha is attached to the form, but for some reason, after pressing the button, the JS script that sends the form data to the server does not work, I cannot understand why it does not work. I'm new to this business and I don't have anyone to ask my friends about this problem, I will be very grateful for help!
HTML:
<form id="contact-form">
<div class="row">
<div class="col-md-12">
<div class="form-group"><label for="fio">Імʼя</label>
<div class="input-group" data-placement="top" data-toggle="tooltip"
title="Не варто використовувати спецсимволи, лише літери">
<input class="form-control" id="fio" placeholder="Ваше ім'я та прізвище" required="required"
type="text" />
</div>
</div>
<div class="form-group"><label for="phone">Телефон</label>
<div class="input-group" data-placement="top" data-toggle="tooltip" title="Наприклад: +380971111111">
<input class="form-control" id="phone" placeholder="+380xxxxxxxxx" required="required" type="text" />
</div>
</div>
</div>
<div class="col-md-1"><button class="btn btn-skin" data-badge="inline" id="btnRequest"
type="submit">Відправити
заявку</button></div>
</div>
</form>
JS:
$("#btnRequest").on("click", function (e) {
console.log("12");
e.preventDefault(); //Здесь внимательно!!!!!!!!!!!! Форма не пашет по дефолту!!!
let form = $(this); // запишем форму, чтобы потом не было проблем с this
let error = false;
if (validText($("#fio")) && validPhone($("#phone"))) {
console.log("Here must be ajax request");
var fio = $("#fio").val(),
phone = $("#phone").val();
if (!error) {
form.find("input, textarea").each(function () {
// пробежим по каждому полю в форме
if ($(this).val() == "") {
// если находим пустое
alert('Заполните поле "' + $(this).attr("placeholder") + '"!'); // говорим заполняй!
error = true; // ошибка
}
});
var data = form.serialize();
//console.log(street+' '+building+' '+room+' '+fio+' '+phone+' '+tarif);
$.ajax({
// инициализируем ajax запрос
type: "POST", // отправляем в POST формате, можно GET
url: "send.php", // путь до обработчика, у нас он лежит в той же папке
dataType: "json", // ответ ждем в json формате
data: {
usr_fio: fio,
usr_phone: phone,
}, // данные для отправки
beforeSend: function (data) {
// событие до отправки
form.find("#btnRequest").attr("disabled", "disabled"); // например, отключим кнопку, чтобы не жали по 100 раз
},
success: function (data) {
// событие после удачного обращения к серверу и получения ответа
if (data["error"]) {
// если обработчик вернул ошибку
alert(data["error"]); // покажем её текст
} else {
// если все прошло ок
alert("Лист відправлено! З Вами зв'яжуться!"); // пишем что все ок
}
},
error: function (xhr, ajaxOptions, thrownError) {
// в случае неудачного завершения запроса к серверу
alert(xhr.status); // покажем ответ сервера
alert(thrownError); // и текст ошибки
},
complete: function (data) {
// событие после любого исхода
form.find("#btnRequest").prop("disabled", false); // в любом случае включим кнопку обратно
},
});
} else {
console.log("Something went wrong..");
}
}
});
I tried to change the names of the placeholders, the id of the button, but the script simply does not go.
UPDATE: So far, I have updated the latest options, with which everything should work, but the js code is not called, added a complete form and removed the captcha
Well, the solution was to make unique ids for fields in the form