使用jQuery和Coldfusion服務器代碼啓用/禁用提交按鈕

Question

我想在代碼中啓用/禁用jQuery提交按鈕。現在，所有東西都可以運行，直到我提交表單，它經過服務器端驗證並失敗，這會將我帶到一個帶有後退按鈕的錯誤頁面，當我單擊後退按鈕時，我會返回到表單頁面並且該按鈕仍處於禁用狀態。有什麼想法嗎？

代碼：

<input type="submit" value="Submit" id="SubmitBtn" name="SubmitBtn"> 

    <script type="text/javascript" language="javascript"> 
    if(typeof window.submitForm == "undefined") { 
     window.submitForm = "true"; 
    } 

    $(function() { 
     $("input:submit").button().click(function() { 
      var submitCheck = window.submitForm; 
      $(this).button("disable").val("Processing..."); 
      if(submitCheck==="true") { 
       $(this).closest("form").submit(); 
      } else { 
       $("input:submit").button("enable").val("Submit"); 
       return false; 
      } 
     }); 
    }); 
    $(window).unload(function() { 
     setTimeout(function() { 
    $("input:submit").button("enable").val("#ATTRIBUTES.enabledText#"); 
}, 300); 
    }); 
    </script> 

這裏是正在發生的事情：當我點擊提交按鈕，文本更改爲「處理...」，按鈕被禁用。服務器代碼工作，返回錯誤，然後單擊後退按鈕（瀏覽器欄或JavaScript：history.back（）按鈕）。當我返回到表單頁面時，文本已變回「提交」，但該按鈕仍處於禁用狀態。我該如何解決？

當後退按鈕被擊中時，瀏覽器是不是完全重新加載？我錯過了別的嗎？

此外，假設服務器端的錯誤不能改變，我不能簡單地回發到窗體本身（即錯誤頁面會顯示）。我也測試了window.submitForm變量，然後返回true。

Answer 1

我很確定這是一個已知的FireFox問題，你可以確保所有瀏覽器的一致性體驗的唯一方法是不禁用按鈕，只是使用JS來確保他們不會做雙重職位。這是我的解決方案，我改變了一些你的佈局，以便它更抽象。

<script type="text/javascript" language="javascript"> 
    $(document).ready(function(){ 
     var validating = false; 

     if(typeof window.submitForm == "undefined") 
     { 
      window.submitForm = "true"; 
     } 

     validateForm = function(that) 
     { 
      if(!validating) 
      { 
       validating = true; //So that they can't double post 

       var submitCheck = window.submitForm; 
       $(that).val("Processing..."); 

       if(submitCheck=="true") 
       { 
        $(that).closest("form").submit(); 
       } 
       else 
       { 
        $(that).val("Submit"); 
        validating = false; 
        return false; 
       } 
      } 
     } 

     $(window).unload(function(){ 
      setTimeout(function() {$("input:submit").button("enable").val("#ATTRIBUTES.enabledText#");}, 300); 
      var validating = false; 
     }); 

     $("#SubmitBtn").click(function() { 
      ValidateForm(this); 
     }); 
    }); 
    </script> 

Answer 2

我會使用一個略有不同的方法來JS自己..嘗試一些沿着這些路線：

<form id="FormId" name="FormName" action="sompage.cfm" method="post"> 
    ... 
    <input type="submit" value="Submit" id="SubmitBtn" name="SubmitBtn"> 
    ... 
</form> 


<script type="text/javascript" language="javascript"> 
    $(document).ready(function(){ 
     /* when the script loads, set the value of the button and enable it */ 
     $("#SubmitBtn").removeAttr('disabled'); 
     $("#SubmitBtn").attr('value','Submit'); 
     /* when the button is clicked, submit the form */ 
     $("#SubmitBtn").click(function(){ 
      $("#SubmitBtn").attr('disabled','true'); 
      $("#SubmitBtn").attr('value','Processing...'); 
      $("form#FormId").submit(); 
     }); 
    }); 
</script> 

正如你可以看到這是一個有點緊張，並強制復位每當頁面被重新加載