Posted at

【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();
}

こうすることによって

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

カンタン!