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

Salesforce

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

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

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

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

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

しかも

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

とのこと。

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

うまくいきました。

Javascriptから値を参照

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

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

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

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

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

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

outputTextの値が取得できない

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

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

Javascriptから値が参照できない

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

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

コメント

タイトルとURLをコピーしました