0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ChromeでのSubmit二度押し防止対策 苦肉の策

Posted at

Chrome固有の問題

こちらの記事に詳しく書かれているのですが,ChromeだとWindows版もAndroid版もButtonタグにdisabledをつけてしまうと,submit後であってもPOST送信されなくなってしまいます。

上の記事に「解決済み」とあった方法も,うまく動かなかったため,試行錯誤の上,このようにして動かしてみました。

hoge.js
var btnLock = 0;

function on_submitonce(){
    let targetButtons = Array.from(document.querySelectorAll('.btn_once'));
    if(btnLock !== 0){
        window.alert("2度押しは無効です");

        let i = 0;

        targetButtons.forEach(function () {
            targetButtons[i].disabled = true;
            i++;
        });

        return false;   //ロックされていたらキャンセル
    } else {
        btnLock++;
        let i = 0;

        targetButtons.forEach(function () {
            targetButtons[i].classList.add("disabled");
            i++;
        });
    }
}

document.getElementById('form').addEventListener( 'submit', on_submitonce );
foo.html
<form id="form" .....>
..
..
<button type="submit" class="btn_once">
</form>

初回のボタン押下で,Bootstrapのdisabledクラスをaddして対応。当然,見た目が変わってもsubmitはできてしまします。
そこで,2度目に押下されたときは disabledをつけてPOST送信されないようにしてます。

もう少しスマートなコードにできたらいいのですが…。

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?