如何在JavaScript中实现表单提交前的确认与取消

实现提交前确认逻辑

要实现表单提交前的确认，我们通常会使用JavaScript的confirm()方法。confirm()会弹出一个带有指定消息的模态对话框，并提供“确定”和“取消”两个按钮。如果用户点击“确定”，confirm()返回true；如果用户点击“取消”，则返回false。

结合confirm()的返回值，我们可以决定是否阻止表单的默认提交行为。

阻止默认提交行为：event.preventDefault()

当我们在submit事件监听器内部，根据confirm()的结果决定不提交表单时，核心操作就是调用事件对象的preventDefault()方法。这个方法会阻止事件的默认行为，对于submit事件而言，就是阻止表单数据被发送到服务器并阻止页面刷新。

立即学习“Java免费学习笔记（深入）”；

完整代码示例

以下是实现表单提交前确认与取消的JavaScript代码示例：

Favird No-Code Tools

无代码工具的聚合器

下载

// 获取需要添加确认功能的表单元素
const form = document.querySelector('#incidentform');

// 为表单添加 'submit' 事件监听器
form.addEventListener('submit', function (event) {
  // 定义确认对话框中显示的文本
  let confirmationMessage = "您确定要提交此表单吗？";

  // 弹出确认对话框，并根据用户选择进行判断
  if (!confirm(confirmationMessage)) {
    // 如果用户点击了“取消”（即confirm()返回false），
    // 则阻止表单的默认提交行为
    event.preventDefault(); 
    console.log("表单提交已取消。");
  } else {
    // 如果用户点击了“确定”（即confirm()返回true），
    // 则允许表单继续其默认提交行为
    console.log("表单正在提交...");
  }
});

代码解析

1. const form = document.querySelector('#incidentform');:

   • 这一行通过CSS选择器获取ID为incidentform的HTML表单元素。确保你的HTML中存在一个ID为incidentform的标签。

2. form.addEventListener('submit', function (event) { ... });:

   • 这是核心部分。我们为获取到的form元素添加了一个事件监听器。
   • 'submit'：指定我们监听的是表单的提交事件。
   • function (event) { ... }：这是事件发生时会执行的回调函数。event参数包含了关于事件的详细信息，包括preventDefault()方法。

3. let confirmationMessage = "您确定要提交此表单吗？";:

   • 定义了将在confirm对话框中显示给用户的提示文本。

4. if (!confirm(confirmationMessage)) { ... }:

   • confirm(confirmationMessage)：弹出确认对话框。如果用户点击“确定”，它返回true；如果点击“取消”，则返回false。
   • !confirm(...)：这个条件判断的是用户是否点击了“取消”（即confirm()返回false，取反后为true）。

5. event.preventDefault();:

   • 关键一步。如果用户点击了“取消”，event.preventDefault()会被调用，从而阻止表单的默认提交行为。这意味着表单数据不会被发送，页面也不会刷新。