禁用提交按鈕會停止提交PHP / Javascript表單

Question

我想我遇到了一個經典問題，但到目前為止我找不到合適的解決方案。

我有一個表單，用戶點擊“發送”，一切正常，使用PRG模式，並進行客戶端和服務器端驗證。

當任何用戶（假設他輸入有效輸入）在服務器腳本結束執行之前快速點擊一次之后，就會出現問題...

我沒有得到任何重復的條目，因為我照顧，但瀏覽器沒有轉到我的“感謝提交頁面”。 相反，它重新提交具有相同值的同一頁面，我得到的是我設置的自定義錯誤，警告用戶他試圖輸入已存儲在數據庫中的詳細信息。 首先發送的詳細信息都在數據庫中，但用戶沒有機會知道。

我嘗試使用jQuery禁用提交事件上的提交按鈕，但在這種情況下，數據不會被提交。

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的情況下處理UA

提前致謝

Answer 1

根據服務器端語言，禁用提交按鈕可能會導致問題。 這是因為禁用的元素未發布到服務器。 像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 2

你必須return true ; 如果你想要一個簡單的按鈕來提交表單，你可以嘗試這個。

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

Answer 3

在服務器端，在每個表單中生成一個隨機數，在提交表單時存儲該號碼，如果該號碼早先已存儲，則丟棄該提交。 當用戶禁用了javascript時，這是您可以做的最好的事情。 （並發問題可能很棘手，因為同時處理兩個相同的請求 - 確保使用某種鎖定機制，例如PHP中具有唯一字段的表或flock（）命令。）

在瀏覽器端，只需在提交表單時設置一個標志，並丟棄所有后續提交：

$('#mail-form').submit(function() {
    if ($(this).data('submitted') {
        return false;
    } else {
        $(this).data('submitted', true).addClass('submitted');
    }
});

您可以使用submitted類將按鈕設置為灰色或其他內容。 簡單地禁用它們有一些好處; 喬希已經說過了一個。 另一個原因是Firefox在您點擊刷新時喜歡記住禁用狀態，這可能會導致您的用戶在某些情況下陷入困境。

Answer 4

我認為這意味着您依賴於提交按鈕的值來為請求提供服務？ 那是你在檢查

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

這不是好習慣。 您永遠不應該依賴提交按鈕的值，因為這正是向用戶顯示的內容。 相反，您應該添加一個隱藏的輸入，其中包含您要觸發的事件。 提交表單后，您無需關心提交按鈕的值是什么，您可以禁用它。 表單中的所有其他非禁用數據仍會提交。

您可以在禁用按鈕后強制提交。

$(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 5

這個鏈接似乎對我很好

http://www.erichynds.com/jquery/jquery-disabling-the-submit-button-when-a-form-is-submitted/