啓用提交按鈕，如果表單提交失敗

Question

我有下面的代碼來禁用窗體已提交防止多次提交一次後提交按鈕。

的問題是，如果下一個頁面加載從來沒有的東西或與用戶連接的情況，按鍵則保持禁用。

有沒有一種方法來檢查，如果用戶仍處於連接狀態，並再次啓用按鈕，如果提交失敗，使用戶可以重試提交表單？

這是我的jQuery代碼：

$form.on("submit", function() { 
    var emptyInputs = 0; 

    // calculate empty inputs 

    if (emptyInputs === 0) { 
     var $button = $("#signup button"); 

     $button.prop("disabled", true); 

     //if (/* connection is lost/offline */) { 
     // $button.prop("disabled", false); 
     //} 

     return true; 
    } 

    return false; 
}); 

Answer 1

試試這個，

//callback handler for form submit 
$form.submit(function(e) 
{   
    var postData = $(this).serializeArray(); 
    var formURL = $(this).attr("action"); 
    $.ajax(
    { 
     url : formURL, 
     type: "POST", 
     data : postData, 
     success:function(data, textStatus, jqXHR) 
     { 
      //go to success page 
     }, 
     error: function(jqXHR, textStatus, errorThrown) 
     { 
      // handle fail event your way 
      $("#signup button").removeAttr("disabled");  
     } 
    }); 
    e.preventDefault(); //STOP default action 
    e.unbind(); //unbind. to stop multiple form submit. 
}); 

Answer 2

由於提交按鈕觸發一個完整的頁面請求沒有很多可以做，因爲沒有活動觸發重置。如果您提交表單作爲ajax請求，您可以在特定超時後中止請求。