Rails の form 内で disabled された submit ボタンを再度 enable する

form を submit する時に disabled されるボタンを re-enable するには $.rails.enableFormElements($form) を使う。

二重サブミット防止

まず、data 属性に disable_with を設定するとクリック時にボタンが disabled になり、二重 submit 防止になる。ラベルも disabled_with で指定したメッセージに置き換わる。

<%= form_for @user do |f| %>
  <%= f.submit 'Submit', data: { disable_with: 'Submitting...' } %>
<% end %>

re-enable

submit 後に画面ごとリロードするような処理ならよいのだが、submit イベントをオリジナルの処理でハンドリングしたときは disabled されたボタンを自前で元に戻してやらないといけない。

$.rails.enableFormElements($form) がそれをやってくれる。

$form = $($.rails.formSubmitSelector)

$form.on 'submit', (e) =>
  e.preventDefault()

  $.post(url, data)
    .done(navigateToNextPage)
    .fail (xhr) =>
      showAlert(xhr)
      $.rails.enableFormElements($form)