禁用提交按钮将阻止提交表单PHP / Javascript

Question

我想我遇到了一个典型的问题，但到目前为止我还没有找到一个可行的解决方案。

我有一个表单，用户单击“发送”，然后使用PRG模式并同时进行客户端和服务器端验证，一切工作正常。

当任何用户(假设他输入了有效的输入)在服务器脚本结束执行之前快速单击一次以上时，就会出现问题……

我没有得到任何重复的条目，因为我处理了它，但浏览器没有转到我的“感谢提交页面”。相反，它使用相同的值重新提交相同的页面，我得到的是我设置的自定义错误，以警告用户他正在尝试输入已存储在数据库中的详细信息。首先发送的详细信息都在数据库中，但用户没有机会知道。

我尝试使用jQuery禁用submit事件上的submit按钮，但在这种情况下，数据不会提交。

HTML

   <div id="send-button-container">
   <input id="send-emails" type="submit" name="send_emails" value="Send"/>
   </div>

jQuery

   $(document).ready(function(){

        $('#mail-form').submit(function(){
        $('#send-emails').attr('disabled','disabled');
        });
   });

我想知道在禁用按钮后是否可以使用Javascript强制提交，以及如何处理禁用Javascript的UAs

提前感谢

Answer 1

我假设这意味着您依赖提交按钮的值来处理请求？这就是你要检查的

$_REQUEST['send_emails'] == 'Send';

这不是一个好的实践。您永远不应该依赖submit按钮的值，因为这正是显示给用户的内容。相反，您应该添加一个包含要激发的事件的隐藏输入。表单提交后，您不需要关心submit按钮的值是什么，您可以禁用它。表单中的所有其他非禁用数据仍将提交。

您确实可以在禁用该按钮后强制提交。

$(function () {
   $("#mail-form").submit(function () {
      $("#send-emails").attr('disabled', 'disabled');
      window.location = '?' + $("#mail-form").serialize() + '&send_mails=Send';
      return false;
   });
});

服务器端设置了一个$_SESSION变量，用于跟踪他们最后一次提交的时间，并在一定时间内阻止提交。

<?php
session_start();
if (isset($_REQUEST['send_emails'])) {
   if (isset($_SESSION['mail_sent'])
   && strtotime($_SESSION['mail_sent']) < strtotime('5 seconds ago')
   ) {
      redirect_to_thanks();
   }
   do_post();
}

function do_post() {
   if (do_validate()) {
      $_SESSION['mail_sent'] = time();
      redirect_to_thanks();
   }
   else {
      yell_at_user_a_lot();
   }
}
?>

Answer 2

根据服务器端语言的不同，禁用submit按钮可能会导致问题。这是因为禁用的元素不是到服务器的POSTed。像ASP.NET这样的语言需要提交按钮值，以便它知道要触发哪个事件处理程序。我通常做的是隐藏提交按钮，并在它后面插入一个禁用的虚拟按钮，这对用户来说是相同的。然后在onsubmit处理程序中，您可以返回false并以编程方式提交表单...

$('#mail-form').submit(function(){
  var btn = $('#send-emails');
  var disBtn = $("<input type='button'/>").val(btn.val()).attr("disabled", "disabled");

  btn.hide().after(disBtn);
  this.submit();
  return false;
});

与其他投票结果不同的是，请注意，对于自然表单提交，您不需要从提交处理程序显式返回true：http://jsfiddle.net/XcS5L/3/

Answer 3

你必须使用return true；如果你想要一个简单的按钮来提交表单，你可以尝试一下。

$(function(){
   $('#submitID').one('click',function(){
    $('#formTobeSubmitted').submit();
    $(this).attr('disabled','disabled');
 })
});