使用jQuery实现的表单提交功能异常，寻求原生JS替代方案

嘿，别担心，原生JavaScript完全能解决这个问题！而且不管是修复现有jQuery代码还是用原生JS重写，核心都是要阻止表单的默认提交行为——这应该就是你在jsfiddle里点击提交后跳转报错的根本原因。

一、先说说怎么修复你的jQuery代码 #

默认情况下，浏览器在表单提交时会自动跳转页面（要么刷新当前页，要么跳转到action属性指定的地址），这会直接打断你的隐藏/显示逻辑。所以第一步必须先阻止这个默认行为：

// 假设你的表单ID是"contact-form"，感谢信息容器ID是"thank-you-message"
$('#contact-form').submit(function(e) {
  // 关键：阻止浏览器默认的表单提交跳转
  e.preventDefault();
  
  // 执行隐藏表单、显示感谢信息的逻辑
  $(this).hide();
  $('#thank-you-message').show();
  
  // 如果你需要把表单数据实际提交到后端（比如发送邮件），可以在这里加AJAX代码
  // 示例：
  // $.ajax({
  //   url: this.action,
  //   method: this.method,
  //   data: $(this).serialize(),
  //   success: function() {
  //     console.log('数据提交成功！');
  //   }
  // });
});

另外要注意：在jsfiddle测试jQuery代码时，记得在左侧设置里勾选引入jQuery库，不然会出现$ is not defined的报错哦。

二、原生JavaScript实现方案 #

如果想改用原生JS，逻辑和jQuery版本完全一致，只是语法更“原生”，不需要依赖任何库，稳定性也很好：

// 获取DOM元素
const form = document.getElementById('contact-form');
const thankYouMsg = document.getElementById('thank-you-message');

// 监听表单提交事件
form.addEventListener('submit', function(e) {
  // 同样要阻止默认跳转行为
  e.preventDefault();
  
  // 控制显示隐藏
  form.style.display = 'none';
  thankYouMsg.style.display = 'block';
  
  // 若需提交数据，用原生Fetch API
  // 示例：
  // fetch(this.action, {
  //   method: this.method,
  //   body: new FormData(this)
  // }).then(response => {
  //   if (response.ok) {
  //     console.log('数据提交成功！');
  //   }
  // });
});

额外小提示 #

• 记得给你的感谢信息元素加初始隐藏的CSS：#thank-you-message { display: none; }，不然页面加载时它就会显示出来啦
• 如果不需要提交数据到后端，只做前端交互，上面的代码就足够了；如果需要提交，一定要用异步方式（AJAX/Fetch），这样才不会触发页面跳转

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