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

在前端开发中，尤其是初学者使用原生 JavaScript 处理表单时，常遇到「点击按钮后控制台无日志输出」的问题。这并非代码语法错误，而是由两个关键机制共同导致的：HTML 表单的默认提交行为 和 DOM 元素选择器的误用。

? 根本原因分析

1. id="Formulario" 绑定在 <div> 上，而非 <form> 元素
   原 HTML 中：

   <form action="#">
       <div class="form first" id="Formulario"> <!-- ❌ 错误：ID 在 div 内 -->

   而 JavaScript 中却尝试获取该 ID 并监听 submit 事件：

   const cadForm = document.getElementById('Formulario');
   if (cadForm) {
       cadForm.addEventListener("submit", ...); // ❌ div 不会触发 submit 事件
   }

   ✅ 正确做法是将 id="Formulario" 移至 <form> 标签上：

   

   MusicAI

   AI音乐生成工具

   下载

   <form action="#" id="Formulario"> <!-- ✅ 正确：form 才能触发 submit -->

2. 未调用 event.preventDefault()
   <form> 默认提交会触发行内 action="#" 的跳转（即页面重载）。一旦页面刷新，所有尚未执行完的 JS（包括 console.log）都会被中断，控制台自然看不到输出。
   ✅ 必须在事件处理函数中显式阻止默认行为：

   cadForm.addEventListener("submit", (e) => {
       e.preventDefault(); // ✅ 关键：阻止页面刷新
       console.log("Success"); // ✅ 现在能正常输出
   });

✅ 完整修复示例

<!-- 修改后的 HTML 片段（关键：id 移至 form 标签） -->
<form action="#" id="Formulario">
    <!-- 其余表单结构保持不变 -->
    <button type="submit" class="nextBtn">Submit</button>
</form>

// 修复后的 JavaScript（含防刷新 + 可选 Swal 提示）
const cadForm = document.getElementById('Formulario');

if (cadForm) {
    cadForm.addEventListener("submit", (e) => {
        e.preventDefault(); // ? 必须！阻止页面重载

        console.log("✅ Form submitted successfully!"); // ✅ 控制台可见

        // 示例：调用 SweetAlert2 弹窗（需确保库已正确加载）
        // Swal.fire({
        //     icon: 'success',
        //     title: 'Cadastro realizado!',
        //     text: 'Seus dados foram enviados com sucesso.'
        // });
    });
}

⚠️ 注意事项与最佳实践

• 避免命名冲突：示例中定义了名为 alert() 的函数，但 alert 是浏览器全局函数名，覆盖它可能导致意外行为。建议改用语义化名称，如 showRegistrationError()。
• 脚本加载时机：确保 JS 代码在 DOM 加载完成后执行。推荐将 <script> 放在 </body> 前，或使用 DOMContentLoaded 事件包裹逻辑。
• 调试技巧：在 console.log 后添加 debugger; 可强制断点，辅助验证事件是否真正触发。
• 表单验证扩展：实际项目中，应在 preventDefault() 后加入字段校验逻辑（如检查必填项、邮箱格式等），仅当验证通过才执行后续操作（如发送 AJAX 请求）。

掌握这两点——正确绑定事件目标 和 主动阻止默认行为——是驾驭表单交互的基础。它们不仅解决 console.log 不显示的问题，更是构建可靠、可维护前端交互的起点。