javascripthtmlformsweb

Js don`t send post query


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


Solution

  • Well, the solution was to make unique ids for fields in the form