Javascript_submit()完了後に処理したい

postでURLに対してデータを送信し、自分の画面は閉じる動きを実現したいです。

ですが、現在の状態では、submit()されずに自画面が閉じてしまいます。
onClick()イベント内
　：
　form.submit();
　window.open('about:blank', '_self').close();

対して、以下のように自画面を閉じる処理をコメントアウトすると正常にsubmit()されます。
onClickイベント内
　：
　form.submit();
　//window.open('about:blank', '_self').close();

submit()が完了するよりも前に画面が閉じてしまうために
送信できていないのだと想定しています。
そのため、
parent.window.open('about:blank', '_self').close();
を、submit()がちゃんと完了したら動くようにしたいです。

onClickイベント完了後、またsubmit()が完了後に発火するようなイベントはあるでしょうか？
また、そのほかに良い方法はあるでしょうか？

よろしくお願いいたします。

No.3 回答者： naktak 回答日時： 2020/09/04 10:09

submitはその要素をページ遷移するため、submitした後のコードは走行しません。

submitする要素を非表示のiframeにして、iframeのloadイベントによって
submit結果を得て、その結果に応じて処理を実装すればできます。

下記、jqueryを使った場合ですが、イメージです。

<form id="test_form" method="post" target="_test_frame">
<!-- 色々html -->

<!-- アップロード時submitターゲット -->
<iframe id="test_frame" name="_test_frame" style="display:none;"></iframe>
</form>

function hoge() {
$('#test_frame').off();
$('#test_frame').on('load', function() {
var jsonText = $(this).contents().text(); // 受け取る結果はjson形式
try {
var response = $.parseJSON(jsonText);
} catch (e) {
// システムエラー時処理
}
if (response.error) {
// submit結果がエラーの時の処理
return;
}
// submit結果がOKの時の処理
});

$('#test_form').submit();
}

No.2 回答者： yambejp 回答日時： 2020/09/03 14:33

子ウィンドウ出ない限り自分自身をクローズすることはできませんが

そういう状態だと考えてよろしいですか？
これは子ウィンドウを閉じるプログラムをparentに仕込んでおいて
子はサブミットする前にsetTimeoutで自分を閉じるプログラムを仕込んでおいてください

No.1 回答者： zircon3 回答日時： 2020/09/03 14:19

Webブラウザのウィンドウに表示している画面上で入力を行い、それをWebサーバーへ送信（＝submit）したのですから、サーバーからの処理結果を受け取らないと処理は完結しません。

Webの通信の基本は「Webブラウザ側からWebサーバーに対して通信を起こし、それを受けたWebサーバーが要求された内容の結果を返す」という往復の通信で処理が完結します。
これは静的コンテンツの場合でも、質問者様がやろうとしておられる動的コンテンツの場合でも同じです。

ですからsubmitしたその場でウィンドウを閉じるのではなく、submitでWebサーバーへ送った後、サーバーからの結果（の画面）を受信してウィンドウを閉じるという仕組みにしましょう。
ユーザが操作することなくウィンドウを閉じたいのであれば、現在submitに続いて行っているウィンドウcloseの処理をWebサーバーがWebブラウザに対して返す処理結果のウィンドウ内に移されればよいです。その場合はOnLoadイベントで起動するJavaScriptにするなどされればよいでしょう。

参考まで。