Chromeの場合、submitボタン押下時にボタンをdisabledにすると、フォームデータが送信されない。

クライアントからデータが多重送信されることを防止するため、submitボタンを押下した瞬間にそのボタン自体を押下不能にすることを考えます。

<form id='form'>
  <input type='submit' id='submit' />
</form>

<script>
let submit = document.getElementById('submit');
submit.addEventListener('click', (evt) => {
  submit.disabled = true;
}, false);
</script>

Google Chromeだと上記のコードは想定通りに動作しません。つまりフォームデータ自体がサーバに送信されなくなってしまいます(´・ω・｀) ネットワークコンソールを見ている限りだと、submitイベントが中断されているような挙動を示していたのですが、詳細は不明(フロントエンドマンわからないマンの限界)。なおFireFoxとMicrosoft Edgeでは正常に動作したので、Chrome特有の仕様・挙動の可能性があります。

「Chromeだけ動かない」事象だったので、デバッグには苦労したのですが、とりあえず以下のように書き換えることで、同様の機能を実装することができました。なおこのコードはChrome,FireFox,Edgeすべてで正常に動作しました。

<form id='form'>
  <input type='submit' id='submit' />
</form>

<script>
let form = document.getElementById('form');
form.addEventListener('submit', (evt) => {
  let submit = document.getElementById('submit');
  submit.disabled = true;
}, false);
</script>