Html - Js don`t send post query

anonymous
July 2, 2023
264 views
1 vote
2 Answers

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

Answers

Chosen as BEST ANSWER
- anonymous_user
- July 2, 2023 at 4:53 pm
- 0 votes
0
Well, the solution was to make unique ids for fields in the form

(Edit)

First, the callback for form.find("input, textarea").each isn’t appropriate since form here is a button element. I changed it form to an html form Element

secondly, response is not defined hence response.value is impossible. I created an element with id token_generate and had response hold its value attribute

The validText and validPhone functions are not defined so i replaced with 1, but if you have them then you can replace it.

     <form>
          <input id="phone" placeholder="Phone" type="text">
          <input id="fio" placeholder="Fio" type="text">
          <input type="textarea" id="textarea">
          <div class="col-md-1">
            <button class="btn btn-skin" data-badge="inline" id="btnRequest" type="submit">Відправити заявку</button>
          </div>
      </form>

$("form").on("submit", function (e) {
  e.preventDefault();
  let form = $(this);
  var error, response;
  var fio = $("#fio").val(),
      phone = $("#phone").val(),
      response = $("#token_generate").val();

    //validText($("#fio")) && validPhone($("#phone"))
  if (1) {
    console.log("Here must be ajax request");
    

     form.find("input, textarea").each(function () {
        if ($(this).val() == "" || !$(this).val()) {
        alert('Заповніть поле "' + $(this).attr("placeholder") + '"!');
        error = true;
      }
    });


    if (!error) {
      var data = form.serialize();
      $.ajax({
        type: "POST",
        url: "send.php",
        dataType: "json",
        data: {
          usr_fio: fio,
          usr_phone: phone,
          token_generate: response,
        },
        beforeSend: function (data) {
          form.find("#btnRequest").attr("disabled", "disabled");
        },
        success: function (data) {
          if (data["error"]) {
            alert(data["error"]);
          } else {
            alert("Лист відправлено! З Вами зв'яжуться!");
          }
        },
        error: function (xhr, ajaxOptions, thrownError) {
          alert("error status:"+xhr.status);
          alert(thrownError);
        },
        complete: function (data) {
          form.find("#btnRequest").prop("disabled", false);
        },
      });
    } else {
      console.log("Something went wrong..");
    }
  }
});

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Js don`t send post query

Answers