JavaScriptでVisualforceの項目値を操作

#ルックアップ項目の値操作
JavaScriptでinputFieldの項目に値を渡す場合は次のように記載することで対応できます。

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

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

![スクリーンショット 2014-07-11 23.50.07.png](https://qiita-image-store.s3.amazonaws.com/0/8407/a4b7e43b-815b-19ac-828b-4aa0a320a56d.png)

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

```js
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を使用します。
こんな感じです。

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

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

![スクリーンショット 2014-07-12 0.10.50.png](https://qiita-image-store.s3.amazonaws.com/0/8407/05ea805f-a66d-5316-5672-c5d690e19d3d.png)

この画像は次のように指定することで表示することができます。
```
<!-- チェックあり -->
<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を使って切り替えることができます。

```js
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に対して値をセットしたときはそのままだと改行されずに表示されてしまいます。

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

```js
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/>');
}
```

![スクリーンショット 2014-07-12 0.25.20.png](https://qiita-image-store.s3.amazonaws.com/0/8407/3df17315-19df-741f-e043-1238affbc13e.png)

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

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

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