【Visualforce】JavascriptからgetElementByIdで値を参照する方法

JavascriptからgetElementByIdで値を取得する方法。いくつかメモがあるので時系列で書いてく。

ループの中のコンポーネントを参照する方法はこちら

JavascriptからgetElementByIdで値を参照する方法

最初こんな感じでid=”tanka”の値を取得しようとしていたが、うまくいかない。

<apex:page id="pg" controller="SampleController">
    <apex:form id="frm">
        <apex:pageBlock id="pb" title="サンプル" tabStyle="Sample__tab">
            <apex:pageBlockSection id="pgs" title="サンプル情報">
                <apex:inputField id="tanka" value="{!sample.Tanka__c}"/>
                <apex:inputField id="suuryou" value="{!sample.Suuryou__c}"/>
                <apex:outputField id="kingaku" value="{!sample.Kingaku__c}"/>
            </apex:pageBlockSection>
            <apex:pageBlockButtons id="pbb">
        		<apex:commandButton value="ボタン" onclick="sample();" />
        	</apex:pageBlockButtons>
        </apex:pageBlock>
        <script type="text/javascript">
        	function sample() {
                var val = document.getElementById('tanka').value;
                alert(val);
            }
        </script>
    </apex:form>
</apex:page>

どうもVisualforceページのコンポーネントを参照する場合は、$Component.Path.to.Idの書き方で対象のコンポーネントを指定してあげる必要があるらしい。
Visualforce 開発者ガイド $Component

しかも

コンポーネントがネストされている場合は、完全なコンポーネントパス指定子を使用する必要があります。

らしい。

とりあえず開発者ガイドに倣ってJavascriptの処理をこんな感じで書き換えてみる。

function sample() {
    var val = document.getElementById('{!$Component.pb.pgs.tanka}').value;
    alert(val);
}

うまくいった。

ちなみに上記ソースは、開発者ガイドのサンプルに倣ってapex:pageBlockからネストしたパスでコンポーネントを指定した。でもapex:pageとかapex:formってコンポーネントパスに含めなくて良いの？apex:formタグが複数ある場合はどうなるの？と疑問に思ったので、apex:pageからネストした書き方も試してみた。

function sample() {
    var val = document.getElementById('{!$Component.pg.frm.pb.pgs.tanka}').value;
    alert(val);
}

これもうまくいった。apex:pageやapex:formは省略可能なのかな。

$Componentを使わずgetElementByIdで値を参照する方法

$Componentを使わなくても、こんな書き方でも同じ動きにできる。

function sample() {
    var val = document.getElementById('pg:frm:pb:pgs:tanka').value;
    alert(val);
}

色々調べている時に、誰かがこんな書き方をしていたので真似してみたらうまくいった（参照元ソースは見失ってしまった）。

コロンで連結していくだけなので、個人的にはこっちの方が覚えやすいかも。

outputTextの値が取得できない

上記まではapex:inputFieldの値を取得しようとしていたが、今度は同じ要領でapex:outputTextの値を取得しようとしたらうまくいかない。

金額の値を参照するとundefinedになってしまう。

これは、apex:outputTextはspanに変換されるため、valueではなくinnerHTMLで参照する必要があるとのこと。
Salesforce | document.getElementById(‘id’).value not working for apex:outputtext

innerHTMLにしたら無事取得でた。apex:outputFieldも同じ考え方。

function sample() {
    var val = document.getElementById('pg:frm:pb:pgs:kingaku').innerHTML;
    alert(val);
}