【JS】フォームでデータ送信後、サブウィンドウを開く方法

JS勉強中の初心者の覚書です。

サブウィンドウは、window.openで開くことができます。

サブウィンドウを開く

window.open("url", "window_name", "width=100,height=300,scrollbars=yes");

普通にサブウィンドウを開くだけなら、
上記のコードをonclickなりで指定してあげれば問題ありません。

私は、
フォームからデータをPOSTしつつサブウィンドウを開きたいなあ、と思いました。
上記のコードでは、指定したURLを開くことはできますが
当然、データを送信することはできません。

そういうことをするためには、
先にサブウィンドウを開いた後で、
そのサブウィンドウをtargetに指定してsubmitしてあげればOKです。

フォーム

<form action="/action" method="post" name="form_hoge" id="form_hoge">
  <input type="text" name="name" value="">
  <input type="button" name="button" value="submit" onclick="open()">
</form>

サブウィンドウを開く

function open() {
    window.open("about:blank","window_name","width=100,height=300,scrollbars=yes");
    document.form_hoge.target = "window_name";
    document.form_hoge.submit();
}

こうすることによって
あたかもデータ送信しながらサブウィンドウが開いたように見えるわけですね。
カンタン！