如何防止使用enter键提交多个表单? - How do I prevent multiple form submissions with the enter key?

How do I prevent multiple form submissions with the enter key?

本文关键字：表单提交何防止 enter | 更新日期: 2023-09-27

我使用PHP和javascript构建了一个小游戏。由于每个问题都有时间限制，所以我没有提供提交按钮;相反，用户可以直接按回车键提交答案。按下回车键后，用户被重定向到另一个URL，该URL检查发布的答案是否正确，如果答案正确则加10分，然后用用户的分数更新数据库，然后将用户重定向到他们有另一个问题要回答的知识页面。但是，当用户输入正确的答案并多次按enter键而不让页面重新加载时，脚本将认为他们的答案是有效的，并且在提交答案的任何时候都会添加他们的分数。所以，如果我在输入正确答案后按40次回车键，它就会加400分。我试过使用:

来防止这种情况

$("form").submit(function() {
    $(this).submit(function() {
        return false;
    });
    return true;
});

但这似乎不起作用。如何在数据提交一次后禁用提交操作，直到页面重新加载?

欢迎使用Javascript、Jquery或PHP的任何解决方案

var isSubmitted = false;
$("form").submit(function() {
   if(!isSubmitted){
     isSubmitted = true;
   }else{
     return false;
   }
});

您必须添加到数据库中存储提交信息的解决方案之一，例如对于每个用户，在添加值+10之前您应该检查是否已经添加了值。我建议的原因是，因为任何其他客户端选项都可能在这种或那种情况下失败。

试试这个代码

$('#form1').submit(function(e) {
    $('#send').attr("disabled", "disabled"); // Where #send is the id of ur submit button//
});

包含Jquery BlockUI插件。http://www.malsup.com/jquery/block/，并在您的页面中包含以下代码:

$("input").keypress(function(event) {
  if (event.which == 13) {
    event.preventDefault();
    $("form").submit();
    $.blockUI;
  }
});

当用户点击进入时，插件将阻塞UI，用户将无法再次点击进入，直到页面重新加载