Tab切换时自动提交表单问题排查求助

我太懂这个坑了！之前用那段Tab代码加表单时也踩过同样的雷😅。问题出在HTML按钮的默认类型上，和JavaScript本身关系不大，不过也能通过JS补漏解决。

核心原因 #

W3Schools的Tab切换示例里，切换按钮用的是<button>标签，但没指定type属性。而根据HTML规范：

当<button>元素嵌套在<form>标签内部时，它的默认type是submit——也就是说，点击它会自动触发表单的提交事件，这就是你切换Tab时表单自动提交的原因！

两种解决方法 #

方法1：给Tab按钮指定type="button"（最推荐）

直接修改所有切换Tab的按钮，明确告诉浏览器这只是个普通按钮，不是提交按钮：

<!-- 原按钮代码 -->
<button class="tablinks" onclick="openCity(event, 'London')">London</button>

<!-- 修改后 -->
<button type="button" class="tablinks" onclick="openCity(event, 'London')">London</button>

这个方法最直接，从根源上避免了按钮触发提交，不需要改JS代码。

方法2：在JS函数中阻止默认事件

如果不想改HTML，也可以在Tab切换的JS函数里添加阻止默认行为的代码，拦截表单提交：

function openCity(evt, cityName) {
  // 先阻止默认事件（关键新增代码）
  evt.preventDefault();

  // 下面是原有的Tab切换逻辑
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

额外提醒 #

如果你的表单里还有真正的提交按钮，记得给它指定type="submit"，避免和Tab按钮混淆。

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