JavaScriptでVisualforceの項目値を操作

ルックアップ項目の値操作

JavaScriptでinputFieldの項目に値を渡す場合は次のように記載することで対応できます。

document.getElementById(inputs.inputName).value = document.getElementById(stds.stdName).value;

ただしルックアップ項目の場合は.valueで値を渡しただけでは一意になるID値を渡すことができません。
そのため保存処理を実行したときに複数の項目が見つかりましたとエラーメッセージが表示されてしまいます。

これを回避するには_lkidと_lkoldを使用します。

var stdAccount = '{!$Component.form.block.stdSection.stdAccount}';
var stdAccountlkid = '{!$Component.form.block.stdSection.stdAccount}_lkid';
var stdAccountlkold = '{!$Component.form.block.stdSection.stdAccount}_lkold';

document.getElementById(inputAccount).value = document.getElementById(stdAccount).value;
document.getElementById(inputAccountlkid).value = document.getElementById(stdAccountlkid).value;
document.getElementById(inputAccountlkold).value = document.getElementById(stds.stdAccountlkold).value;

チェックボックス項目の値操作

チェックボックスの値をセットする場合は.valueではなく.checkedを使用します。
こんな感じです。

document.getElementById(inputs.inputIsPrivate).checked = document.getElementById(stds.stdIsPrivate).checked;

inputFieldに対して値をセットする場合は上の方法で問題ありませんが、outputFieldに対して実行するとtrue,falseと文字列が表示されてしまいます。Salesforceの参照時のチェックボックスは画像で表示されているのでこちらを利用します。

この画像は次のように指定することで表示することができます。

<!-- チェックあり -->
<apex:image value="/img/checkbox_checked.gif" width="16" height="16" styleClass="checkImg" id="outputIsPrivateChecked" />
<!-- チェックなし -->
<apex:image value="/img/checkbox_unchecked.gif" width="16" height="16" styleClass="checkImg" id="outputIsPrivateUnChecked" />


上の方法でチェックあり/なしの画像を表示できるので後はチェックボックスの値を条件に表示/非表示を切り替えてあげれば大丈夫です。JavaScriptで対応する場合は.style.displayを使って切り替えることができます。

if (document.getElementById(stds.stdIsPrivate).checked) {
  document.getElementById(outputs.outputIsPrivateChecked).style.display = 'block';
  document.getElementById(outputs.outputIsPrivateUnChecked).style.display = 'none';
} else {
  document.getElementById(outputs.outputIsPrivateChecked).style.display = 'none';
  document.getElementById(outputs.outputIsPrivateUnChecked).style.display = 'block';
}

テキストエリア項目の操作

テキストエリアの値をセットするときは改行の部分に注意する必要があります。inputFieldに対して値をセットしたときは特に問題ありませんが、outputFieldに対して値をセットしたときはそのままだと改行されずに表示されてしまいます。

この問題を回避するには次のような感じで改行コードを<br/>タグに変更してあげることで回避できます。

var textAreaValue = document.getElementById(fieldId).value;
if (textAreaValue) {
  textAreaValue = textAreaValue.replace(/\r\n/g, '\n');
  textAreaValue = textAreaValue.replace(/\r/g, '\n');
  return textAreaValue.split('\n').join('<br/>');
}

outputFieldに値をセットするときの注意

inputFieldに値をセットするときは.valueに対して値をセットすれば良いのですが、outputFieldの場合は.valueに入れても値が表示されません。outputFieldの項目に対してJavaScriptで値をセットして表示したい場合は、.innerHTMLを使用します。これで値を表示できるのですが、reRenderでリフレッシュしたときには値が消えてしまうので注意が必要です。

サンプルコード

GitHubにサンプルコードをアップしてあります。実際に動かして確認できると思います。
https://github.com/tyoshikawa1106/Apex_sObjectFieldValueJavaScriptCopy

最後に

JavaScriptは便利ですが、Page内に直接記載していくと処理が多くなったときに少し保守しずらくなってしまいます。静的リソースやコンポーネント、もしくは別ページに分けるように開発すると保守がしやすくなると思います。