javascript - 避免在 html 中提交多个表单

Question

我正面临一种虚拟问题。

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

我意识到，如果我重复点击提交按钮几次(在加载操作页面之前)，我会收到与我点击的命令一样多的命令。

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

谢谢

附言我在提交“请稍候...”时添加了 JQuery UI 对话框，但我仍然收到双重命令。

更新

作为GeoffAtkins 建议我会:

1. 显示对话框后禁用提交
2. 使用唯一表单的 token (因为它已经由 Symfony 添加) 不要使用 Symfony token 作为唯一表单 token ，因为它在当前 session 中始终相同。使用随机或类似的东西。

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/