G.1.13 コンポーネントタグが作成した入力項目をJavaScriptで参照したい

コンポーネントタグはJSP実行時にHTMLのINPUT, SELECT, TEXTAREAタグを出力して入力項目を作成します。これらのHTMLのタグを、ユーザーが独自に作成したJavaScriptから参照する方法を以下の2通りに分けて説明します。

入力項目で発生したイベントによって呼び出される関数から参照する場合

以下のコンポーネントタグにはeventアトリビュートがあり、イベントの発生によって呼び出される関数を指定できます。

種類	タグ
フィールドタグ	fieldString, fieldLong, fieldDouble, fieldBigInteger, fieldBigDecimal, fieldDate, fieldTextArea, checkBox, pushButton, radioButton, anchor, label
コレクションタグ	comboBox, listBox, buttonList

eventアトリビュートでJavaScript関数を指定するときに、関数の引数にthisを指定すると、関数の中で入力項目を参照できます。

<uji:fieldString .... event="onblur='emptyCheck(this)'"/>

<script type="text/javascript">
<!--
function emptyCheck(obj) {
    if (obj.value == '') {
        alert("商品名を入力してください。");
        obj.focus();
    }
}
// -->
</script>

入力項目のイベントと直接関係がない関数から参照する場合

一般にJavaScriptでは、INPUT, SELECT, TEXTAREAタグのnameアトリビュートに指定した名前で入力項目を参照できます。しかし、コンポーネントタグの場合は、入力項目とプロパティを適切に対応付けるためにnameアトリビュートに指定する名前を自動的に生成します。そのため、名前で入力項目を直接参照するのは困難です。

フォーム内の入力項目には先頭から順にインデックス番号が与えられます。これを利用して、コンポーネントタグで作成する入力項目を以下の方法で参照できます。

参照したい入力項目に付ける名前を決定します。
コンポーネントタグの直前にtype="hidden"を指定したINPUTタグを配置して、1で決定した名前をINPUTタグに付けます。
名前を元に、INPUTタグのフォーム内でのインデックス番号を取得します。
その番号+1をインデックス番号とする入力項目がコンポーネントタグによって作成された入力項目です。

上記3,4を実現するJavaScript関数はuji:resourceTextタグを使用して出力させることができます。

uji:comboBoxが出力するSELECTタグを参照する場合を例に説明します。

uji:comboBoxタグに名前を付けます。ここでは、destComboという名前をつけることにします。

以下のようにuji:comboBoxタグの直前にINPUTタグを記述します。

<uji:form name="reserveForm" ...>
  <INPUT type="hidden" value="destCombo">
  <uji:comboBox .... />
  ....
</uji:form>

INPUTタグのvalueアトリビュートに名前destComboを指定します。nameアトリビュートは省略します。上記の記述はJSP実行時に以下のようなHTMLを出力します。

<FORM name="reserveForm" ...>
  <INPUT type="hidden" value="destCombo">
  <SELECT name="uji.model.42445.combo">
  <OPTION VALUE="rome">ローマ</OPTION>
  ....
  </SELECT>
  ....
</FORM>

uji:comboBoxの出力するSELECTタグを取得するためのJavaScript関数をHTMLに埋め込みます。この関数は、以下のようにuji:resourceTextタグを使用することによって出力させることができます。
```
<uji:resourceText id="uji.findElement"/>
```
この記述は、以下のような関数findElementを出力します。
```
function findElement(formName, name, idx) {....}
```
3のfindElementには、第1引数にフォームの名前、第2引数にuji:comboBoxタグの名前を指定します。uji:buttonListタグのように一つのUJIタグが複数の入力項目を生成する場合は、何番目の項目かを第3引数に指定します。先頭を0番と数えます。uji:comboBoxのように入力項目が1個の場合は第3引数に0を指定します。以下は使用例です。
```
var sel;
sel = findElement("reserveForm", "destCombo", 0);
alert(sel.selectedIndex + "番目が選択されました。");
```