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

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

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

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

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

<!-- VFページ -->
<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>

<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>

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);
}

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);
}

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);
}

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);
}

function sample() {

var val = document.getElementById('pg:frm:pb:pgs:kingaku').innerHTML;

alert(val);

}