Ajax提交表单失效触发默认提交方法与动作问题求助

问题描述 #

某个表单的AJAX（或相关逻辑）无法正常工作，另一个同逻辑的表单却可以完美适配AJAX提交。已尝试过多种方案：将input替换为button，并将按钮类型从"submit"改为"button"；尝试过jQuery的.post()、.get()方法，也试过原生xmlHttpRequest，始终没有找到问题原因。
调整代码后控制台出现报错（此前无任何报错）。

原代码片段 #

HTML表单代码 #

<form action="./contactAction.php" method="POST" class="contact_form" id="cform" name="contactForm">
  <input type="text" name="contactFname" placeholder="Prenumele" />
  <input type="text" name="contactLname" placeholder="Numele" />
  <input type="text" name="contactEmail" placeholder="Emailul tau" />
  <textarea name="contactSubject" placeholder="Scrie mesajul tau" style="height: 200px"></textarea>
  <button type="submit" name="contactBtn">Submit</button>
</form>

JS代码 #

$(document).ready(function () {
  $("#contactBtn").click(() => {
    contactFormValidation();
  });
});

function contactRequest() {
  let fname = $("#contactFname");
  let lname = $("#contactLname");
  let email = $("#contactEmail");
  let subj = $("#contactSubject");

  $.ajax({
    type: "POST",
    url: "../../contactAction.php",
    data: ({"constactFname": fname, "contactLname": lname, "contactEmail": email, "contactSubject": subj}),
    dataType: "html",
    success: (response) => {
      alert("Request success");
      //$("#loginPage").html(response);
    },
    error: () => {
      alert("Error :(");
    }
  });
  return false;
}

function contactFormValidation() {
  let $form2 = $("#contactForm");
  $form2.validate({
    wrapper: "div",
    debug: false,
    rules: {
      contactFname: {
        required: true
      },
      contactLname: {
        required: true
      },
      contactEmail: {
        required: true,
        email: true
      },
      contactSubject: {
        required: true
      }
    },
    submitHandler: () => {
      alert("Submit calledd");
      contactRequest();
    }
  });
}

排查出的问题 #

• 元素选择器全部错误：
  1. 提交按钮只有name="contactBtn"，没有设置id，$("#contactBtn")无法选中元素，点击事件根本不会触发
  2. 表单id是cform，JS里错误用$("#contactForm")选择表单，无法选中表单元素
  3. 所有输入框只有name属性，没有设置id，$("#contactFname")这类选择器无法选中输入元素
• 取值逻辑错误：即使能选中输入元素，let fname = $("#contactFname")拿到的是jQuery元素对象，不是用户输入的值，需要加.val()获取输入内容
• 参数拼写错误：AJAX请求的data里第一个参数名拼写错误，把contactFname写成了constactFname，后端无法正确接收参数
• 没有阻止表单默认提交行为，触发AJAX的同时会触发原生表单跳转，打断AJAX请求

修正方案 #

1. 给所有输入元素补充对应的id属性，给提交按钮补充id="contactBtn"
2. 表单选择器改为$("#cform")
3. 输入框取值补充.val()
4. 修正AJAX参数拼写错误
5. 在submitHandler里阻止默认提交行为，或者在按钮点击事件里加e.preventDefault()

内容的提问来源于stack exchange，提问作者Virgiliu