XPagesのRadio Button Groupから選択された値をクライアントJavascriptで取得する方法

XPagesのRadio Button Groupから選択された値をクライアントJavascriptで取得する方法

Radio Button Groupを使うと簡単にXPagesでラジオボタンを実装することができます。サーバーで選択された値を取得するためには、以下のようにデータバインド(Bind)してやることで実装が可能です。   今回説明するのは、クライアントサイドJavascriptを使って、現在選択されている値を取得する方法を説明したいと思います。 右の画像が今回作るサンプルのXPagesのスクリーンショットになりますが、ラジオボタンを選択してボタンをクリックすると、クライアントJavascriptが現在選択されているラジオボタンの値(value)を返す、というものです。 言いかえると、サーバーを介さない本来のJavascriptでよく行うタイプの使い方を実装してみる、という試みです。    まず、Radio Button GroupをXPagesに以下のように配置しました。 <xp:radioGroup id=”radioGroupMember” value=”#{sessionScope.SelectedName}”> <xp:selectItem itemLabel=”エレン” itemValue=”エレン・イエーガー”> </xp:selectItem> <xp:selectItem itemLabel=”ミカサ” itemValue=”ミカサ・アッカーマン”> </xp:selectItem> <xp:selectItem itemLabel=”アルミン” itemValue=”アルミン・アルレルト”> </xp:selectItem> </xp:radioGroup>   次に、実際にクライアントJavascriptをトリガーするためのボタンを配置します。コードは以下のようになるとおもいます。 <xp:button value=”” id=”button1″> </xp:button>   配置がおわったら、ボタンを選択した状態で、「Events」タブの [onclick] にコードを記述していきます。今回はクライアントJavascriptですので、[client]のタブが選択されているのに気をつけてください。 サンプルのJavascriptは以下のようになります。 var chkRadioMember = dojo.query(“input[name$=’#{id:radioGroupMember}’]”); for(var i=0; i < chkRadioMember.length; i++){ if(chkRadioMember[i].checked){ alert(chkRadioMember[i].value +”であります!”); } } return false; […]