12
5

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 5 years have passed since last update.

【JavaScript】フォーム等の送信ボタンに対する二重送信防止対応策

Last updated at Posted at 2017-12-27

フォーム等の送信ボタンを二度押しされた場合、二重にリクエストが飛ぶので、
JSで一度ボタンを押されたら二度目を押せないようにdisabled属性を付与させるという対応をしました。

以下Javascriptソース(要jQuery)

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $("form").submit(function() {
        $('[name="submitButton"]').attr("disabled", true).css({
            'cursor':'wait',   // お好みに変更する
            'color' :'#DCDCDC' // お好みに変更する
        });
    });
});
</script>

PHP側で二重リクエストの処理をどうするか、調べてみましたがあまりよくわからなく、
ほとんどJSで制御しているみたいでしたので一旦この処理を入れておけばいいかな~と思ってます。

もしPHP側で対応するいい方法があれば教えていただきたいです・・・

12
5
0

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
12
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?