Question

我面临着一种虚假的问题。

在我的网站上有一个订单表格（简单的html表格），我注意到我不时会收到双重命令。

我意识到如果我反复点击几次提交按钮（在加载操作页面之前），我得到的命令就像我点击的一样多。

所以我想知道是否有简单的解决方案使表单提交异步？

由于

P.S。我在提交时添加了JQuery UI对话框＆＃34;请等待......＆＃34;但我仍然得到双重命令。

更新

正如GeoffAtkins 提议的那样，我将：

显示对话框后禁用提交
使用唯一形式的令牌（因为它已由Symfony添加）不要将Symfony令牌用作唯一表单令牌，因为它对于当前会话始终是相同的。使用随机或类似的东西。

Answer 1

我会考虑这样做（jQuery，因为你说你用过它）

$(function() {
  $("#formId").on("submit",function() {
    $("#submitBut").hide();
    $("#pleaseWait").show();
  });
});

如果您提交表单并重新加载页面。

如果您订购了Ajax，那么请执行

$(function() {
  $("#formId").on("submit",function(e) {
    e.preventDefault();
    var $theForm = $(this);
    $("#submitBut").hide();
    $("#pleaseWait").show();
    $.post($(this).attr("action"),$(this).serialize(),function() {
      $theForm.reset();
      $("#submitBut").show(); // assuming you want the user to order more stuff
      $("#pleaseWait").hide();
    });
  });
});

请注意，点击提交按钮时停用提交按钮可能会一起停止提交（至少在Chrome中）：https://jsfiddle.net/mplungjan/xc6uc46m/

Answer 2

只需在点击时禁用该按钮，例如：

$("#my-button-id").on("click", function() {
   $(this).attr("disabled", "disabled");
});

Answer 3

var bool = true;
function onclick()
{
    if(bool)
    {
    //do stuff
    bool = false;
    }
    else
    {
    //ignore
    }
}

Answer 4

您可以在单击表单时禁用该表单上的按钮，然后继续执行该操作。你可能会改变文字说'＃34; loading ...＆＃34;或者其他一些。

您可能还想在失败或完成ajax请求时重新启用该按钮。

我已经做了很多次这样的事情：https://stackoverflow.com/a/19220576/89211

避免在html中提交多个表单

4 个答案: