Rails 4：單擊后禁用提交按鈕

Question

我有一個form_tag(foo_path(@foo), remote: true, id: 'foo-form'表單和一個提交按鈕submit_tag ("Submit", :id => "foo-submit")

我想在點擊后禁用提交按鈕。 顯然，我不能使用onlick="jQuery(this).prop('disabled', true);" 因為它會打破遠程功能。 我知道:disable_with submit_tag的:disable_with數據屬性，但它似乎對我不起作用。 它確實生成了正確的表單代碼，但它沒有任何效果。 我不確定它為什么不起作用，但可能是因為我同時使用原型（遺留原因）和jquery。 雖然，我只為jquery而不是原型加載ujs 。 但是，所有其他query_ujs功能都可以正常工作。

還有其他方法可以禁用提交按鈕嗎？

Answer 1

使用

submit_tag "Submit", id: "foo-submit", data: { disable_with: "Please wait..." }

Answer 2

submit_tag的替代方法是button_tag 。 button_tag允許您添加字體真棒微調器。

<%= button_tag 'Submit', class: 'btn btn-primary', 
      data: { disable_with: "<i class='fa fa-refresh fa-spin'>
      </i> Submitting Changes..."} %>

Answer 3

您可以使用CoffeeScript執行以下操作：

jQuery ->
  $('.theform').submit ->
    $('input:submit').attr("disabled", true)

當提交class="theform"的表單時，這將禁用表單提交按鈕。 根據您的需要，您可以調整此選項以適合表單的類/ ID。

Answer 4

該問題是由無效的HTML代碼引起的。 請參閱<div> break <form> disable_with現在可以使用

Answer 5

由於它是一個ajax調用，因此將觸發相應操作的結果js.erb文件。

禁用點擊算法可以放在這個js.erb文件中。

# in the controller
def foo_method
...
# will render js.erb for ajax call 
# assuming there is no .html view file in the directory
end

# in foo_method.js.erb
$('input:submit').attr("disabled", true);

它應該會在禁用按鈕noew的情況下將您帶到同一頁面