window.open で開いた窓に対して Post する

JavaScript

2013.11.18

いやあ、もうすぐスーパーマリオ3Dワールドの発売日だねえ！って言ったら「もうマリオはいいでしょ…」って言われた kimoto です。
なんでだよ！すっげえ面白そうじゃんかよ！よくないよ！

さて、本日はちょっと小ネタで、window.open で開いた窓に対して Post でデータを渡す方法です。

利用場面としては、フォームの確認画面を小窓で開きたい時などですね。
URL にデータを乗っけて Get で開く方法も無くはないですが、データ量に制限もあったりなど、いろいろと問題があります。
ということで、開いた窓に対して Post でデータを投げる方法です。

function open_preview() {
    window.open("about:blank","preview","width=600,height=450,scrollbars=yes");
    document.input_form.target = "preview";
    document.input_form.method = "post";
    document.input_form.action = "preview.php";
    document.input_form.submit();
}

<form action="send.php" method="post" name="input_form" id="input_form">
<input type="text" name="name" value="">
<input type="text" name="address" value="">
<input type="text" name="company_name" value="">
<input type="button" name="button" value="submit" onclick="open_preview();">
</form>
</pre>

流れとしては、「"about:blank" でウインドウを開く」→「target や action などを設定し、submit() する」という感じです。

注意点としては、例えば同じフォームでボタンによってプレビューのポップアップと送信を分けたい時など。
このスクリプトを発動させると action や target が変わっているため、送信が上手く行かなくなったりします。どこかで書き換えた値はリセットしてやるようにしましょう。

以上、ちょっとした小ネタでした。