网站表单点击提交后JS无法发送POST请求求助

问题描述 #

网站表单改版前可正常运行（附带验证码），但改版后点击提交按钮，负责发送数据到服务器的JS脚本完全没反应。作为开发新手，已经尝试修改placeholder名称、按钮ID，甚至移除验证码后，JS依旧未触发。以下是当前的表单代码：

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..");
    }
  }
});

问题排查与修复方案 #

1. 检查jQuery是否正确引入
   你的代码用了$，如果页面没加载jQuery，脚本直接失效。先确认页面里有jQuery的引入，比如在</body>前加：

   <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
   

   同时把你的JS代码放在$(document).ready()里，确保DOM加载完成后再绑定事件：

   $(document).ready(function() {
     // 原JS代码放在这里
   });
   

2. 补全或注释缺失的验证函数
   代码里调用了validText和validPhone但没提供定义，这会直接导致代码报错中断。要么补上这两个函数的实现，要么先注释掉这个判断，先让基础逻辑跑通：

   // 暂时注释验证判断，测试AJAX功能
   // if (validText($("#fio")) && validPhone($("#phone"))) {
     console.log("Here must be ajax request");
     // 后续AJAX代码...
   // }
   

3. 修正form变量的赋值错误
   你写的let form = $(this);里，this是按钮元素，不是表单。改成：

   let form = $("#contact-form");
   

   否则后面form.find()找不到表单内的元素，逻辑会出错。

4. 改用表单的submit事件绑定
   绑定按钮click事件可能会被表单默认提交干扰，换成绑定表单的submit事件更可靠：

   $("#contact-form").on("submit", function (e) {
     e.preventDefault();
     let form = $(this); // 这里this就是表单元素，赋值正确
     // 后续逻辑...
   });
   

5. 用浏览器控制台看报错
   按F12打开开发者工具，切换到Console标签，点击提交按钮，看是否有红色报错信息。比如"jQuery is not defined"、"validText is not a function"这类提示，直接告诉你问题根源。

内容的提问来源于stack exchange，提问作者Иван Снежок