jquery を使わず、form で連続クリック禁止したい

Question

タイトルの通り、jquery 抜きで form で連続クリック禁止したいのですが、
良さそうだなと思ったのは下記のURLのコメントに載っているサンプルでした。

ただこちらの例が一般的に良い例なのかコメントをいただきたいのと、
最終的に javascript の form.submit() も検知できるように作りたいのですが、
どなたか良い例をご存知であればご教授ください。

＜追記＞
なんのために連続クリックを禁止するかというと、例えば登録画面などで、ユーザーが一度登録ボタンを押下後、サーバー側の処理中にユーザーがちゃんと押せたかな？と思って２度３度登録ボタンを押してしまうことがありますがそのユーザーの繰り返しのボタン押下操作を防止したいという意味です。

https://qiita.com/summer4an/items/311f8c83fc95e26772d2

<script>
(function() {
  'use strict';

  document.addEventListener('submit', function(event) {
    var target = event.target;
    if (target.tagName.toLowerCase() !== 'form') {
      return;
    }
    var elements = target.elements;
    var i, len, element;
    for (i = 0, len = elements.length; i < len; ++i) {
      element = elements[i];
      element.disabled = true;
    }
  });
})();
</script>

Comments

[yambejp]

連続クリックの定義がわかりません。submitを２通しすることはないと思いますが、何をどう禁止するのでしょうか？

[ttakahashi2013]

ご質問ありがとうございます。例えば登録画面などで、ユーザーが一度登録ボタンを押下後、サーバー側の処理中にユーザーがちゃんと押せたかな？と思って２度３度登録ボタンを押してしまうことがありますがそのユーザーの繰り返しのボタン押下操作を防止したいという意味です。

Answer 1

Firefoxで戻ったときに無効になっているだろうなあと思ったのですが、すべてdisabledにするのはもっと大きな影響があります。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input

無効状態のコントロールの値はフォームとともに送信しません。

submitするボタンを無効にすることはよく見かけますが、すべてを無効にすると、本当にすべて何も送られなくなってしまいます。

Answer 2

考え方は２つあります

一つはフラグで管理してサブミットイベントを無効化すること
ただしこれだとボタンが押せるので、二度押しさせないことにはなりません
（二回目以降のボタン押しが無効になっているのでサーバーに負荷はかかりません）

気になるならもう一つ、submitボタンをdisabledにすることです。
ただしsubmitはsubmitボタンだけで起きるわけではありません。
気休め程度に考えておいたほうがいいでしょう。
またsubmitボタンを無効化して戻ってきた場合、submitボタンが押せなくなる
ケースもあるので運用には注意が必要です。

sample

var flg=false;
document.addEventListener('submit',function(e){
  if(flg){
    e.preventDefault();
  }else{
    e.target.querySelector('[type=submit]').disabled=true;
    flg=true;
  }
});

Comments

[ttakahashi2013]

シンプルな回答と注意点に関しありがとうございました。
前者のフラグ管理でいかせていただきます。