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

2024年1月5日 187次阅读

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

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

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

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

谢谢

附：我在提交“等待请…”时添加了JQuery UI对话框,但我仍然得到双重命令.

UPDATE

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

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

最佳答案 我会考虑这样做(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/

点赞