フォームから別ウィンドウを開く方法のまとめ

フォームから別ウィンドウを開く方法のまとめ

Posted at December 20,2010 12:55 AM
Tag:[CGI, JavaScript]

フォームから別ウィンドウを開くためのTipsをまとめました。

1.はじめに

フォームから別ウィンドウを開く場合、

  • 別ウィンドウで起動されるCGIにフォームデータを渡したい
  • フォームボタンを複数回クリックしたときに別ウィンドウを1枚しか開きたくない
  • フォームボタンを複数回クリックしたときに別ウィンドウを複数枚開けるようにしたい

と、色々なケースがあります。

業務で使うCGIを開発するときにこれらのことをネットで色々調べたのですが、FAQサイトなどに個別の情報が散在しているだけでしたので、このエントリーで一挙にまとめてみました。

ここではjQueryを使わないオーソドックスなコードで解説します。コード内に使われているCGI(new_window.cgi)は6項に掲載しています。サンプルを実行する場合、すべての資材を同じディレクトリに配置して実行してください。

2.基本動作

フォームから別ウィンドウを開くには、form要素にtarget属性を与え、値に「_blank」を設定する方法があります。

<form method="post" target="_blank" action="./new_window.cgi">
  <input name="id" type="submit" value="新しいウィンドウを開く" />
</form>

ただし、この方法ではタブブラウザでは新しいタブが開きます。

ウィンドウとして開くには、type属性値が「submit」のinput要素にonclickイベントハンドラを与え、イベントハンドラの中でwindow.openメソッドを起動します。

<script type="text/javascript">
function open1() {
    window.open("new_window.cgi", "hoge", 'width=200, height=200');
}
</script>
<form method="post" action="./new_window.cgi" onsubmit="return false;">
  <input type="submit" name="id" value="新しいウィンドウを開く" onclick="open1()"/>
</form>

form要素にはonsubmitイベントハンドラを与え、値に「return false」を設定しておきます。この設定を行わないと、元ウィンドウでもaction属性に設定されたCGIが実行されてしまいます。

open関数の引数は次の通りです。

  • 第1引数:起動URL
  • 第2引数:ウィンドウ名
  • 第3引数:ウィンドウのスタイル

ウィンドウ名に「_blank」を設定すれば、クリックするたびに新しい画面が開きます。サンプルでは「hoge」という固定文字列を与えているので1枚しか開きません。

3.新しいウィンドウにデータを渡す(開くウィンドウはひとつ)

新しいウィンドウにフォームデータを渡すには、イベントハンドラのパラメータでフォームデータを渡し、そのフォームデータでform.submitメソッドを起動します。このケースではwindow.openの第1引数は使わない(form要素のaction属性値が使われる)ので「about:blank」を設定しています。

<script type="text/javascript">
function open2(f) {
    f.target = "hoge";
    var w = window.open("about:blank", f.target, 'width=200, height=200');
    w.focus();
    f.submit();
}
</script>
<form method="post" action="./new_window.cgi" onsubmit="return false;">
  <input type="text" name="data" />
  <input type="submit" name="id" value="送信" onclick="open2(this.form)"/>
</form>

4.新しいウィンドウにデータを渡す(開くウィンドウは複数)

新しいウィンドウを複数開く方法です。3項では新しいウィンドウを開いた状態でフォームボタンをクリックしても、常に1枚しか開きませんが、本項では別のウィンドウを開くことができます。

<script type="text/javascript">
function open3(f) {
    window.name = (new Date()).getTime();
    var date = new Date();
    var time = date.getTime()
    f.target = window.name + time;
    var w = window.open("about:blank", f.target, 'width=200, height=200');
    w.focus();
    f.submit();
}
</script>
<form method="post" action="./new_window.cgi" onsubmit="return false;">
  <input type="text" name="data" />
  <input type="submit" name="id" value="送信" onclick="open3(this.form)"/>
</form>

window.openの第2引数に、常に値が異なるようタイムスタンプを設定します。2項のケースではウィンドウ名に「_blank」を設定すれば異なるウィンドウが開きますが、JavaScript内からsubmitを起動する場合は期待した動作になりません(新しい空のウィンドウが開き、もうひとつ別のウィンドウが開いてCGIが起動される)。

5.新しいウィンドウにボタンの値を渡す

最後に、新しいウィンドウにtype属性値が「button」のinput要素の値を渡す方法です。値を渡すにはvalue属性をイベントハンドラのパラメータに渡し、その値をtype属性が「hidden」のinput要素に設定します。

<script type="text/javascript">
function open4(f, value) {
    f.button.value = value;
    f.target = "new";
    var w = window.open("about:blank", f.target, 'width=200, height=200');
    w.focus();
    f.submit();
}
</script>
<form method="post" action="./new_window.cgi">
  <input type="text" name="data" />
  <input type="hidden" name="button" />
  <input type="button" value="送信1" onclick="open4(this.form, '送信1')" />
  <input type="button" value="送信2" onclick="open4(this.form, '送信2')" />
</form>

6.CGIサンプル

上記のサンプルから起動されるCGIです。動作確認用にご利用ください。

#!/usr/bin/perl
 
use strict;
use CGI;
 
my $q = new CGI;
 
print $q->header(-charset=>'utf-8',);
print $q->start_html();
 
print '<p>テスト</p>';
print 'text:',$q->param('data') if $q->param('data');
print '<br />button:',$q->param('button') if $q->param('button');
 
print $q->end_html();
関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

「スタイルシートチェッカー」スクリプト from ここにブログの名前を入れます
スタイルシートを適用するとどうなるかチェックできるスクリプト。外部のホームページにも適用できます。 [続きを読む]

Tracked on June 8, 2011 5:23 PM

見栄えを保ちつつも、タグの中に何度も同じ事を書かないようにし... from ここにブログの名前を入れます
スタイルシートの属性をタグから切り離し、外に書く方法。 今回はスクリプトを用いて、外部スタイルシートがどう適用されるのかを試します。 [続きを読む]

Tracked on June 8, 2011 5:25 PM
コメント

はじめまして。「ここにブログの名前を入れます」というブログを書いているTomと申します。
ブログの記事で、スタイルシートチェッカーというスクリプトを書いたのですが、開いたウインドウにデータを送る方法がわからずに困っていました。こちらのサイトを参考にさせていただき解決できました。どうもありがとうございます。

[1] Posted by Tom : June 8, 2011 5:31 PM

>Tomさん
こんばんは。
コメントありがとうございます。
記事がお役に立ったようでよかったです。
ではでは!

[2] Posted by yujiro logo : June 12, 2011 4:05 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)