Sponsored Link

submit ボタンで新しいウィンドウで次のページを開く方法

2008/04/24 13:43更新

Syboos.jp編集長

ページオプション

友だちに送る

submitボタンを押すと、新しいウィンドウを開き、その新しいウィンドウでレスポンスを受け取って画面を表示する方法について解説します。

要点を整理してみます：
１、submitボタンを押すと、新しいウィンドウを開きます。
２、元の画面がそのまま残って、新しいウィンドウでレスポンスを受け取ります。
３、元の画面に他のボタンがあった場合、それらの動きに影響をしないようにしなければなりません。
４、どのボタンが押されたかサーバに通知しなければなりません（押されたボタンによって、サーバ側の処理の種類が変わるかもしれませんので）。

以下は、サンプルからその実現方法を簡単に説明します。

<html>

<head>
    <script type="text/javascript">
    <!--
        function submitNew() {
            //① blankウィンドウを開く。
            var win = window.open("","myNewWnd","width=600,height=480,top=0,left=0,status=1");
            
            //② myformのaction属性を取り出し保存
            var action = document.myform.action;
            //③ 押下されたボタンがbtnSubmitボタンであることをサーバに通知
            document.myform.action = action + "?btnSubmit=dummy";
            //④ レスポンスはmyNewWnd画面が受け取るように設定
            document.myform.target = "myNewWnd";
            //⑤ フォームのサブミット
            document.myform.submit();
            //⑥ myNewWnd画面がフォーカスをあてる
            win.focus();
            //⑦ 他のボタンに影響をしないようにtarget及びactionの値を元に戻す
            document.myform.target = "_self";
            document.myform.action = action;
            return false;
        }
    //-->
    </script>
</head>
<body>
<form id="myform" name="myform" method="post" action="/path/youraction">
その他テキストボックスやラジオボックス、チェックボックスなど
<input type="submit" value="Submit to New Window" id="btnSubmit" name="btnSubmit" onclick="return submitNew();" />
</form>
</body>

</html>


window.open("URL", "ウィンドウ名" [,"オプション"] )関数は、新しくウィンドウを開きます。

第一引数はウィンドウに表示するURLです。ここでは、""と設定されているため、最初の表示は空白ページと表示されます。
第二引数はウィンドウの名前で、nullと設定可能。ここでは、新規ウィンドウがレスポンスを受け取りますので、myNewWndという適当な名前をつけます。
第三引数はウィンドウの形状などを設定する文字列です。カンマで区切って記述します。

ホームページ作成支援

submit ボタンで新しいウィンドウで次のページを開く方法

Syboos.jp編集長 ページオプション 友だちに送る

submitボタンを押すと、新しいウィンドウを開き、その新しいウィンドウでレスポンスを受け取って画面を表示する方法について解説します。

Sponsored Link

Syboos.jp編集長

ページオプション

友だちに送る