允許使用jQuery點擊按鈕提交

Question

我有一個提交按鈕的網頁。我的提交按鈕，如下所示：

<button type="submit" class="btn btn-primary wait-on-click"> 
    <span>Submit</span> 
</button> 

當用戶點擊提交按鈕，我想禁用的按鈕，讓用戶知道有事情發生。要做到這一點，我有以下JavaScript：

$('.wait-on-click').click(function(e) { 
    e.preventDefault(); 
    $(this).prop('disabled', true); 
    $('span', this).text('Please wait...'); 
}); 

該按鈕禁用。文本被更新。但是，提交實際上並未提交給服務器。如果我註釋掉我的JavaScript函數的正文，它可以正常工作。我不明白如何解決這個問題。

謝謝！

Answer 1

我相信你的問題是這一行

e.preventDefault(); 

這阻止提交按鈕的默認行爲，即提交！因此，刪除它。

更新

測試後，我發現這個問題。 我相信你的問題是這一行

$(this).prop('disabled', true); 

出於某種原因，這是防止從形式提交。因此，把它放在提交處理程序中。

$('.wait-on-click').click(function(e) { 
 
    $('span', this).text('Please wait...'); 
 
}); 
 

 
$('form').on('submit', function() { 
 
    $('.wait-on-click').prop('disabled', true); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<form> 
 
    <input name="n" /> 
 
    <button type="submit" class="btn btn-primary wait-on-click"> 
 
    <span>Submit</span> 
 
    </button> 
 
</form>