使用 Vanilla JavaScript 禁用多个表单提交

在 Web 应用程序中，用户可能会多次提交一个表单，这可能会导致数据重复或其他不良结果。在这种情况下，禁用多个表单提交就变得特别重要。这可以通过 Vanilla JavaScript 来完成。

实现步骤

以下是禁用多个表单提交的基本流程：

1. 获取表单 DOM 元素，并针对 DOM 元素添加 submit 事件监听器。
2. 在监听器中禁用表单的提交，例如使用 preventDefault() 方法。
3. 禁用提交后，可以显示一条消息，例如 "请等待" 或 "正在提交"。
4. 在表单提交完成后，需要将消息去除，并启用表单提交按钮。

下面是主要的 JavaScript 代码：

const form = document.querySelector('#myForm');
form.addEventListener('submit', (event) => {
  event.preventDefault(); // 禁止表单提交
  const submitBtn = form.querySelector('input[type="submit"]');
  submitBtn.disabled = true; // 禁用提交按钮
  submitBtn.value = '请稍候...'; // 更改提交按钮文本
  // 发送表单数据
  fetch(form.action, {
    method: form.method,
    body: new FormData(form)
  })
    .then((response) => {
      // 在此添加表单提交成功后需要的操作
      console.log('表单已成功提交！');
    })
    .catch((error) => {
      // 在此添加表单提交失败后需要的操作
      console.error('表单提交失败！', error);
    })
    .finally(() => {
      submitBtn.disabled = false; // 启用提交按钮
      submitBtn.value = '提交表单'; // 恢复提交按钮文本
    });
});

代码解析

1. 首先，使用 querySelector() 方法获取表单元素，并通过 addEventListener() 方法添加提交事件监听器。

   const form = document.querySelector('#myForm');
   form.addEventListener('submit', (event) => {
     // 事件处理程序
   });
   

2. 在事件处理程序中，使用 preventDefault() 方法阻止表单默认提交行为，禁止多个提交。

   event.preventDefault();
   

3. 接着，禁用表单中的提交按钮，以防止重复提交。

   const submitBtn = form.querySelector('input[type="submit"]');
   submitBtn.disabled = true;
   

4. 可以将提交按钮的文本更改为 "请稍候..." 或 "正在提交"，以及显示其他消息，例如 "表单正在提交，请不要关闭窗口"。

   submitBtn.value = '请稍候...';
   

5. 接下来，将表单数据作为 FormData 对象传递给 fetch() 方法，并处理提交成功或失败的情况。

   fetch(form.action, {
     method: form.method,
     body: new FormData(form)
   })
     .then((response) => {
       // 处理提交成功的情况
     })
     .catch((error) => {
       // 处理提交失败的情况
     })
     .finally(() => {
       // 此部分代码将在提交成功或失败之后执行，恢复提交按钮状态。
     });
   

6. 最后，在提交成功或失败之后，启用提交按钮，并将其文本重置为 "提交表单"。

   submitBtn.disabled = false;
   submitBtn.value = '提交表单';
   

总结

使用 Vanilla JavaScript 禁用多个表单提交非常简单。通过添加 submit 事件监听器并在事件处理程序中禁用提交按钮，可以防止数据重复提交。可适用于任何具有表单的网站或 Web 应用程序。