JSでの2重サブミット防止処理が作動しない

Question

閲覧ありがとうございます。

前提・実現したいこと

AページからBページへPOSTでリクエストを送る際、自動遷移+2重サブミットが発生しないようにしたいです。
前提条件として、JSが動作しない場合用に遷移ボタンを表示させています。

現在、AページからBページへ自動遷移する機能を作成しています。
こちら前述したように遷移ボタンを表示させているのですが、こちらのボタンを押した際に自動遷移+ボタン押下の2重サブミットが発生してしまっている状況です。（自動遷移の際につけているsubmit機能、ボタン押下のsubmitでぶつかっている状況）
ボタンを押下した場合に自動遷移のsetTimeoutを打ち消す記述をしているのですが、うまく機能していないようです...
もし解決案をご存じでしたら、アドバイスをお願いします。

該当のソースコード

 //postするformのnameをセット
var formName = 'post_info';
//formを自動で送信
var formSend = function() {
	document.forms[formName].submit();
}
//画面自動遷移の秒数：3秒
var time = 3000;
//変数へ格納
var transition = setTimeout(formSend, time);
//Aページが開けたら自動遷移
window.onload = function() {
	transition;
}
//注文確定ボタンを押下されたら自動遷移はしない処理（2重サブミット防止）
document.getElementById('js_submit_btn').addEventListener('click', function(){
    clearTimeout(transition);
};

<form action="xxx" name="post_info" method="post" onsubmit="return blockForm()">
・
・
・
    <p class="control">
        <input type="submit" value="ボタン" id="js_submit_btn" class="submit_btn" />
    </p>
</form>

Comments

[int32_t]

formSend()が実行されてからフォームの送信が終わるまでの間にjs_submit_btnがクリックされると２重送信になる、という現象で合ってますか?
フォームに target 属性を指定していますか?

[nagano0141cafe]

その現象の認識で合っています。
target属性はついておりません。
諸事情でHTMLは全文載せられないのでformとbutton箇所のソースを記載させていただきました。

Answer 1

フォーム送信は非同期なので、submit() してからそのページがアンロードされて操作不能になるまではタイムラグがあります。なので、3秒後にformSend()が実行された後もまだ js_submit_btn を操作することが可能です。

formSend()内でjs_submit_btnを非表示にしたり disabled にすればよいのではないでしょうか。

Comments

[nagano0141cafe]

回答ありがとうございます。
フォーム送信の仕様、大変勉強になりました。
考えてみるとJSが読み込めている時点で自動遷移ができる＝submitボタン機能は優先的には必要ない前提を考慮すると、確かにdisabledを使えばよかったですね...
アドバイスありがとうございました！そちらの方向で実装します！