3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

jQueryでボタン連打防止!!

Last updated at Posted at 2022-04-17

連打ダメ!絶対!

何か情報を登録したり更新したりする時に、POSTした際に画面を読み込んでる時間があると思います。その際に登録ボタン等を連打すると何も対策してない状態だとご親切に連打した分だけDBに情報を登録してくれます。
それをフロント側で制御してあげましょう。

こんな感じでボタンがあるとします。

index.php
 <button class="js-no-repeated" type="submit">登録</button>

そしたらこれだけでOK

app.js
 $('.js-no-repeated').on('click',function(){
    $(this).prop("disabled", true);
    $(this).closest('form').submit();
  });

これでボタン押せなくなるのはわかると思いますがポイントはその下

app.js
$(this).prop("disabled", true);

disabledにするとその瞬間post自体がされなくなるんですね。
なので下記記述でjsでsubmitをする必要があります。

app.js
$(this).closest('form').submit();
3
3
4

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
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?