如何解决表单提交时 console.log 不触发的问题

✅ 正确解决方案包含两步：

1. 修正 HTML：将 id="Formulario" 移至 标签

   

   C3CRM

   在SugarCRM v4.0.1基础上开发的版本，在这一版本中，我们在原有模块基础上增加了以下模块：1、产品模块(Products)；2、价格单模块(PriceBooks)；3、报价模块(Quote)；4、共享模块(Share)；5、报表模块(Reports)。同时修正论坛上所提的和C3CRM团队测试过程发现的bug(包括翻译bug)，而且还解决邮件模块不能正常收发邮件的问题。共享模块结合Suga

   下载

   <form action="#" id="Formulario"> <!-- 关键修改 -->
     <!-- 其余结构保持不变 -->
   </form>

2. 在事件处理函数中调用 e.preventDefault()

   const cadForm = document.getElementById('Formulario');
   
   if (cadForm) {
     cadForm.addEventListener("submit", (e) => {
       e.preventDefault(); // ? 阻止页面刷新，保留控制台输出
       console.log("Success"); // 现在能稳定看到！
   
       // 示例：结合验证逻辑调用 alert 函数（注意重命名避免覆盖 window.alert）
       // validateAndShowAlert();
     });
   }

⚠️ 额外重要提示：

• 避免使用 alert 作为函数名：原代码中 function alert(){...} 会覆盖全局 window.alert，不仅影响调试，还可能引发不可预知错误（如其他库调用 alert() 失败）。请重命名为更具语义的名称，例如 showVehicleNotFoundError：

  function showVehicleNotFoundError() {
    Swal.fire({
      icon: 'error',
      title: 'Ops..',
      text: 'Pelo visto a placa do veiculo não está cadastrada.',
      footer: '<a href="">Gostaria de cadastrar?</a>'
    });
  }

• 确保 SweetAlert2 已正确加载：检查 <script> 标签顺序，sweetalert2.<a style="color:#f60; text-decoration:underline;" title= "js" href="https://www.php.cn/zt/15802.html" target="_blank">js 必须在自定义脚本之前引入，否则 Swal.fire 会报 ReferenceError。</script>

最后，推荐在开发阶段启用浏览器 DevTools 的 “Preserve log” 选项（Console 面板右上角 ⋯ → “Preserve log”），这样即使页面刷新，之前的 console.log 输出也不会被清空，便于调试验证。

掌握这两个要点——精准选择表单元素 + 主动阻止默认行为——你就能稳定捕获日志、可靠触发弹窗，并为后续表单验证、异步提交（如 fetch）打下坚实基础。