同じform内にsubmitボタンが複数ある際のdisable_withの使い方

disable_withについて

disable_withはsubmitボタンを押した際に二重送信を防いでくれる上にボタン上の文言も「送信中..」などに変更してくれる便利なメソッドです。

= f.submit "投稿する", class: "btn", data: { disable_with: "投稿中..." }

こんな感じで使用します。

ボタンが複数ある場合

ボタンが複数ある場合に困りました。例えば下記のように２つボタンを用意していた場合、どちらを押してもどちらも「投稿中...」「編集中...」となってしまいます。

= f.submit "投稿する", class: "btn", data: { disable_with: "投稿中..." }
= f.submit "編集する", class: "btn", data: { disable_with: "編集中..." }

処理自体は正常に処理されるのですが、ユーザー側から見た場合困惑してしまいます。

対応

JSでsubmitをイベントにして、押したボタン以外のdata-disable-withを削除するという方法で対応しました。

$(document).on('click', '.new-ticket-confirm :submit', function () {
    var buttons = $('.new-ticket-confirm :submit').not($(this));
    buttons.removeAttr('data-disable-with');
    buttons.attr('disabled', true);
});

参考