防止客户重复提交订单？答案

【问题标题】：Prevent customer from double submitting order?防止客户重复提交订单？
【发布时间】：2014-02-20 16:51:40
【问题描述】：

我有一个使用 jQuery 1.9.1 和 Bootstrap 2.3.2 的电子商务网站

我想防止客户意外重复提交订单（点击提交两次）。

关于如何做到这一点的任何想法？

我的输入提交很简单：

 <input type="submit" class="btn btn-orange pull-right" value="Place Order">

我能做些什么来防止这种情况发生吗？我不想妨碍其他客户，我只是不想让人们提交，等待，不耐烦，再次提交，他们的订单被双倍收费。太草率了。

谢谢。

【问题讨论】：

【解决方案1】：

这里有一个小技巧：

<input type="submit" class="btn btn-orange pull-right" value="Place Order" onClick="this.disabled=1">

【讨论】：

【解决方案2】：

提交表单时禁用按钮。你可以这样做：

$('.pull-right').click(function() {
  // Code to submit the form
  $(this).attr('disabled', true);
});

【讨论】：

【解决方案3】：

你可以这样做：

<input type="submit" class="btn btn-orange pull-right" value="Place Order" onclick="$(this).attr('disabled', true);">

【讨论】：

如果点击提交按钮时表单出现错误怎么办？还会被禁用吗？那么当他们再次尝试提交时，它不会让他们？对此我能做些什么吗？
如果表单有错误，您可以启用按钮。除非您向我们提供有关您的表单以及用于发布表单值的内容的更多信息，否则我无法为您提供帮助。
@user1879703 这是您提出的一个非常好的用例。看看我的回答。我认为您可以使用它在您的网络请求成功/失败时启用按钮。
@ahmadalbayati 有趣，我只是尝试过，我的表单甚至没有尝试提交或通过验证。我的测试页面位于：（将东西放入购物车 => 前往购物车 => 结帐）rsatestamle.dminsite.com:444/checkout.aspx?有趣的。不确定是什么阻止了它运行验证或提交。
尝试将$(this).attr('disabled', true);放在提交表单值的代码的开头

【解决方案4】：

有时您可能还想运行类似的函数：OnSubmit 函数（或验证），您可以这样做：

<input type="submit" class="btn btn-orange pull-right" value="Place Order" onclick="this.disabled=true;OnSubmit(this.parentNode);" />

【讨论】：