ホームページでポップアップ入力画面を作成

　今日は作成したホームページの入力欄が全て手入力で、ユーザから使いにくいという苦情がきているようです・・・。そこで、ポップアップ画面のようなものを開いて、そこで入力値を選択、その値を元のページに表示するという機能を実装してみます。

　やりたい事は

親ページ →　呼び出し　→ 子ページ
←　データ送信　←

親ページのソースが

<html>
<head>
<title>親ページ</title>
</head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function fnChild() {
window.open("child.html","child")
} 
//-->
</SCRIPT>
<body>
<form method="POST" name="parent">
<p><input type="text" name="T1" size="20"></p>
<p><input type="button" value="子ウインドウ" name="B1" OnClick=fnChild()></p>
</form>
</body>
</html>

となっていて、JavaScriptのWindow.openを使用して、子ページ(child.html)を呼び出しています。

呼ばれた子ページのソースが

<html>
<head>
<title>子ページ</title>
</head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function fnReturn() {
window.opener.document.parent.T1.value = child.txtChild.value
window.close
} 
//-->
</SCRIPT>
<body>
<form method="POST" name="child">
<p><input type="text" name="txtChild" size="20"></p>
<p><input type="button" value="送信" name="B1" OnClick=fnReturn()></p>
</form>
</body>
</html>

ボタンが押下されると、インプットボックスの中の値を親ページ(parent.html)に戻しています。

ポイントはwindow.openerというオブジェクトを使うと、呼び出し元ウインドウを操作できるといく事ですね。

これを利用して、入力欄に入れる値の一覧をポップアップで表示して、選択されたものを入力欄に戻すというような機能が実装できますね。今まではコンボボックスにしておく位しか考えなかったのですが、こんなに簡単にできるんですねぇ。たった、これだけのことでユーザの使い心地はグンと良くなるでしょう。

一応、上記サンプルの動作例をどうぞ。親ページへGo!!

最初からやっときゃよかったよ、とほほ・・・。

戻る