Jquery 防止表单被重复发送

有时候用户会重复提交表单，这对于程序开发来讲是比较头疼的问题，因为这可能会导致重复执行一些操作，或者在某些场景下会引起一些不必要的麻烦。

我们可以使用 jQuery 防止表单被重复提交来解决这个问题。在表单提交时，我们可以禁用发送按钮，并添加一个“正在处理”（或其他等待信息）的状态，完成后再重新启用按钮。

以下是一些引入 jquery 库的代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

现在我们来看一个 jQuery 防止表单被重复提交的例子：

$('form').submit(function () {
  $('input[type="submit"]', this).attr('disabled', 'disabled');
  $(this).append('<div class="processing">Processing...</div>');
});

• 当用户在表单上提交时，我们首先在表单的发送按钮上禁用 'disabled' 属性。
• 我们还向表单添加一个“Processing...”的文本信息，用于提示用户，正在处理信息。
• 在表单的处理程序完成后，我们还需要把发送按钮重新启用，并删除“正在处理”的文本信息。

下面的代码展示了如何将表单按钮重新启用，并删除“正在处理”的文本信息：

$('form').submit(function () {
  $('input[type="submit"]', this).attr('disabled', 'disabled');
  $(this).append('<div class="processing">Processing...</div>');

  setTimeout(function () {
    $('input[type="submit"]', this).removeAttr('disabled');
    $('.processing').remove();
  }, 3000);
});

在这个例子中，我们设置了一个延迟为 3 秒的定时器。在定时器到期后，我们将发送按钮重新启用，并删除/消除“正在处理”的文本信息。

这就是如何使用 jQuery 防止表单被重复提交的例子。这样可以避免用户在多次单击表单发送按钮时发送重复表单和信息。