Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@neko_the_shadow

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>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
8
Help us understand the problem. What are the problem?