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送信されないようにしてます。
もう少しスマートなコードにできたらいいのですが…。