当使用外部 submit 按钮（）触发表单提交时，preventDefault() 必须绑定在 元素的 submit 事件上，而非按钮的 submit 事件——因为按钮本身不触发 submit 事件，它只是“委托”提交给关联表单。

当使用外部 submit 按钮（``）触发表单提交时，`preventdefault()` 必须绑定在 `

` 元素的 `submit` 事件上，而非按钮的 `submit` 事件——因为按钮本身不触发 `submit` 事件，它只是“委托”提交给关联表单。

在 HTML 中， 是一种表单关联提交机制：该按钮虽不在

标签内部，但通过 form 属性明确指向 #address_form，点击时浏览器仍会触发该表单的 submit 事件，而非按钮自身的任何 submit 事件（按钮原生不支持 submit 事件类型）。因此，你最初监听 #confirm 的 "submit" 事件是无效的——该事件根本不会被触发，导致 preventDefault() 完全未执行，最终表单按默认行为提交并刷新页面。

✅ 正确做法是监听目标

元素的 submit 事件：

document.addEventListener("DOMContentLoaded", () => {
  const addressForm = document.querySelector("#address_form");

  addressForm.addEventListener("submit", (event) => {
    event.preventDefault(); // ✅ 阻止默认提交与页面刷新

    // 获取表单字段值
    const email = document.querySelector("#email");
    const firstName = document.querySelector("#first_name");

    console.log("Email:", email.value);
    console.log("First Name:", firstName.value);

    // ✅ 提交成功后清空输入框（可选）
    email.value = "";
    firstName.value = "";

    // ✅ （进阶）可在此发起 AJAX 提交
    // fetch("/api/submit", {
    //   method: "POST",
    //   headers: { "Content-Type": "application/json" },
    //   body: JSON.stringify({ email: email.value, first_name: firstName.value })
    // });
  });
});

⚠️ 注意事项：

jQuery金融借款单提交表单

jQuery金融借款单提交表单，包含出借金额和日期的选择，且自动计算利息，非常的简单方便。

下载

• 不要监听按钮的 "submit" 事件（它不存在），也不要监听 "click" 后手动调用 form.submit()（这会绕过事件拦截）；
• 确保 form 元素存在且 ID 匹配（如 id="address_form"），且脚本在 DOM 加载完成后执行（DOMContentLoaded 已正确使用）；
• 若后续需支持无障碍或键盘提交（如回车键），监听表单 submit 事件天然兼容——这是标准且健壮的做法；
• 清空字段建议放在 preventDefault() 之后，确保逻辑在非刷新上下文中执行。

总结：表单提交的控制权始终属于

元素；无论提交按钮位于何处，只要它通过 type="submit" 和 form="xxx" 关联到某表单，就应统一在该表单上监听并阻止 submit 事件——这是符合 HTML 规范、跨浏览器稳定且可维护的最佳实践。