のみほーだい!

下の表のような一覧表示で、ユーザIDをクリックして、ユーザ詳細情報画面に遷移するっていうような パターンってよくありますよね？ 結構、僕みたいな初心者は困ります。 javaとJSPとjavascriptとタグで頭がこんがらかります。 httpのGETを使えばもう少し簡単ですが、GET禁止！POSTのみ！って現場はかなり多いです。 そんなときは、javascriptを使ってこうするみたいです。

上のテーブル部分のhtmlは、こんな具合です。

<form name="mainForm" action="submit01r.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>

<a href="javascript:setAndSubmit('001')">001</a>

の部分のhtmlをJSPで作成させるところがミソです。

この部分はタグを使わないシンプルなjspなら

<a href="javascript:setAndSubmit('<%= request.getAttribute("userId") %>')">
    <%= request.getAttribute("userId") %>
</a>

Strutsでタグを使ったjspなら

<a href="javascript:setAndSubmit('<bean:write name="XXXForm" property="userId" />')"
    <bean:write name="XXXForm" property="userId" />
</a>

で、javascriptはこんな具合で定義します。

<script language="javascript">
    function setAndSubmit(id) {
        document.mainForm.userId.value=id;
        document.mainForm.submit();
    }
</script>

つまり、form：mainForm の hidden：userId の value を javascript で乗せ変えて送信させるわけですね。

あとは、form：mainForm の action で定義したところに遷移します。サーブレットのurlを指定すればOKですね。

それでは、上の一覧テーブルのリンクの部分をクリックしてみましょう。イメージがつかめると思います。