LoginSignup
10
9

More than 5 years have passed since last update.

htmlのPOST用buttonで多重送信を防ぐ

Last updated at Posted at 2016-02-07

POSTで送信中に再度ボタンを押され多重送信してしまうのを防ぎたい。

単純に以下で無効化すればよいのかと思ったが、少なくともchrome v47で試した所肝心のPOSTを実行してくれず、遷移もしない。
onclick時にdisabledにすることで、その後のonsubmitに進んでくれない?

<form action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="upfile"/>
  <button type="submit" onclick="this.disabled=true;">送信</button>
</form>

また、onclick時ではなくdisabledにする処理をonsubmit時に書いても送信後に発火するのか送信中はボタンが無効になってくれない。

なので以下のようにする。送信ボタンが複数あってもどれか押されればすべて使えなくなる。

<form action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="upfile"/>
  <button type="submit" onclick='if(typeof pressed != "undefined"){return false;}pressed=1;'>送信1</button>
  <button type="submit" onclick='if(typeof pressed != "undefined"){return false;}pressed=1;'>送信2</button>
</form>
10
9
2

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
10
9