Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

クライアントからデータが多重送信されることを防止するため、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>
neko_the_shadow
IT業界の片隅でひっそり生きるシステムエンジニアです(´・ω・`)
https://nekotheshadow.github.io/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした