2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

disable_withについて

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

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

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

#ボタンが複数ある場合

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

= 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);
});

#参考

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?