單擊後禁用表單按鈕

我想在單擊後禁用表單提交按鈕以防止多次提交表單。我使用下面的代碼以禁用按鈕，添加一個類，使得它顯示爲禁用：單擊後禁用表單按鈕

$("form button.primaryAction").click(function() { 
    $(this).prop("disabled", true).addClass('disabledBtn'); 
    return true; 
});

它工作在IE和Firefox罰款，但在Chrome 17的形式沒有得到提交。我想我可以代替上面的代碼有：

$("form button.primaryAction").click(function() { 
    $(this).prop("disabled", true).addClass('disabledBtn'); 

    var form = // how can I get a reference to the form from the button 'this' ? 
    form.submit(); 
    return false; 
});

但你可以看到我不知道如何從點擊處理程序內得到表單的引用。

來源

2012-02-19 Dónal

你的代碼沒有意義！首先，您禁用默認提交，然後手動提交。

$("form button.primaryAction").click(function() { 
    $(this).prop("disabled", true).addClass('disabledBtn'); 

    var form = this.form; 
    form.submit(); // submits the form 
    return false; // disable the defualt submit.... ?! 
});

不要取消自動提交，就是這樣！

$("form button.primaryAction").click(function() { 
    $(this).prop("disabled", true).addClass('disabledBtn'); 
});

我會這樣寫：

$("form").submit(function() { 
    $('button.primaryAction').prop("disabled", true).addClass('disabledBtn'); 
});

來源

2012-02-19 17:26:08 gdoron

您的建議是代碼原本看着，即沒有返回聲明。該表單未在Chrome中提交，代碼爲 – 2012-02-19 19:17:54

@Don。也許你有另一個提交處理程序返回false，從而阻止提交？ – gdoron 2012-02-19 19:29:59

this.form會給你參考。

所有表單元素（按鈕，輸入，選擇等）都有一個屬性形式它指向它們所屬的表單元素。

來源

2012-02-19 17:03:05

+1不過我還是很想知道原因，原來的代碼不會在Chrome中工作？ – 2012-02-19 17:23:28

我想這是因爲你在提交表單前禁用了按鈕，看起來像這樣可以防止點擊傳播。除了使用submit（）之外，它也應該可以在禁用按鈕之前使用一個很短的延遲（在某些情況下，這可能很重要，例如，當您需要有關服務器側的單擊按鈕的信息時）。 – 2012-02-19 18:29:43

您可能可以通過使用jquery的submit（）函數而不是click（）函數來繞過此問題。包含的功能只會在發生提交操作後觸發。

來源

2012-02-19 17:07:22

單擊後禁用表單按鈕

回答

相關問題