禁用表單提交可防止發送按鈕屬性

Question

我有一個帶有兩個提交按鈕的表單。 我正在使用“名稱”屬性來查看單擊了哪個表單來提交表單。 我想在使用帶有以下功能的jquery時禁用按鈕：

$(document).on('submit', '.js-form', function(e) {
   $(this).find('input[type=submit]').prop('disabled', true);
});

問題是執行此操作后，我發現不再發送name屬性。 我已經檢查了已發送的請求（在“網絡”標簽中-chrome），即使以前沒有問題也沒有發送過請求。

誰能告訴我這是為什么，以及我如何克服它？

謝謝

Answer 1

您應該通過捕獲表單狀態來禁止表單提交。 您可以通過向表單添加一個類來完成此操作，如果該類具有該類，則停止事件。

 $(document).on('submit', '.js-form', function(e) {
     if ($(this).hasClass('disabled')) {
         // Form is disabled, stop the event
         e.preventDefault();
         e.stopPropagation();
         return false;
     } else {
         // Allow first submit and add class to stop subsequent
         $(this).addClass('disabled');
     }
 });

這樣就不會清除或禁用任何按鈕，從而允許所有數據通過。

Answer 2

提交表單后，請不要禁用“提交”按鈕。 瀏覽器已經在技術上為您處理了。 提交表單后，瀏覽器將不接受其他任何成功提交的表單。 當然，用戶可以在頁面加載之前單擊不同的按鈕，但是不會多次提交表單（除非您使用ajax或其他解決方案）。