のみほーだい!

下のような登録画面で、ユーザIDを入力して欲しいんだけど、登録する前にユーザーIDを知らなきゃいけないって不便だなってことよくありますよね？ そういうときは、検索用サブウィンドウを表示させるってのが一般的です。 でも結構、僕みたいな初心者は困ります。 ２つのウィンドウをどうコントロールしていいか、頭がこんがらかります。 そんなときは、javascriptを使ってこうするみたいです。

「検索」ボタン押下で呼び出されるJavaScriptメソッドはこんな感じです。

<script type="text/javascript">
	function userSearch() {
		window.open("userSearch.html", "Test", "width=800,height=800");
	}
</script>

「検索」ボタン押下で表示された小画面のテーブルは、こんな具合です。 もちろんこのJavaScriptメソッドに渡す引数は一覧表示画面でクリックされた行のパラメータを次の遷移先に渡したいと同様に JSPのスクリプトレットやタグに頼ります。

<form name="mainForm" action="sample.html" method="post">

    <table border="1" width="25%" cellspacing="0">
        <tr>
            <td>ユーザID</td><td>名前</td><td>部署</td>
        </tr>
        <tr>
            <td><a href="javascript:setAndSubmit('001')">001</a></td><td>斉藤</td><td>営業</td>
        </tr>
        <tr>
            <td><a href="javascript:setAndSubmit('002')">002</a></td><td>佐藤</td><td>総務</td>
        </tr>
        <tr>
            <td><a href="javascript:setAndSubmit('003')">003</a></td><td>鈴木</td><td>総務</td>
        </tr>
    </table>

    <input type="hidden" name="userId" value="" />

</form>

このテーブルの「ユーザID」リンクをクリックしたときに呼び出される以下のJavaScriptメソッドで、親画面のuserIdを書き変えるわけです。

<script type="text/javascript">
	function setAndClose(id) {
		alert("親画面のuserIdを書き変えますよ");
		window.opener.document.mainForm.userId.value=id;
		//window.close();
	}
</script>

これで小画面に検索入力部と検索ボタンを追加し、検索が出来るようになればOKですね。その部分は普通に検索画面を作る手順と同じなので割愛します。