スクリプトを利用してオブジェクトの内容を更新する

✔ 概要

スクリプトを利用して、入力フォーム上のオブジェクトの内容を更新する方法を説明します。

注意

本設定は、フォーム、旧バージョン形式のフォーム（JSP）および旧バージョン形式のフォーム（PDF）で利用できます。
Liteフォームでは利用できません。

フォーム形式により、設定方法が異なります。

フォームの場合

ここでは以下の操作について説明します。

ヒント

  • 以降の説明のうち、一部の操作では、入力フォーム上のオブジェクトの値を参照・更新するための JavaScript の API を利用します。
    この API は、iftc.cwf.api.Forms という名前空間で公開されています。
    JavaScript API リファレンス もあわせて参照ください。
  • JavaScript で値を更新した場合、JavaScript の仕様上、onChange イベントは実行されません。詳細は、フォームオブジェクトのイベント実行 を参照ください。

注意

一部のラジオボタンとチェックボックスについては、JavaScriptでchecked属性値を設定した場合、入力フォームの表示が反映されません。
iftc.cwf.api.Forms.invokeEvent() を使用し、onChange、onBlur イベントを強制実行することで、入力フォーム上の表示が反映されます。
詳細は、スクリプトでの更新が反映されないオブジェクト を参照ください。

設定方法

JavaScript で以下のように記述します。

  • 単一オブジェクトの更新

    単一のオブジェクトを更新します。
    例として、入力テキストオブジェクト「ITEXT000」の入力値を更新します。

    // ITEXT000の値を「after」で更新
document.getElementsByName("ITEXT000")[0].value = 'after';

  • 同名オブジェクトが複数存在する場合の更新

    ラジオボタンなど複数の同名オブジェクトが存在する場合、以下のように更新します。
    例として、ラジオボタンオブジェクト「IRADIO000」のうち、書き出し値が「Red」のラジオボタンを選択します。

    // ラジオボタンオブジェクトの配列を取得
var radio = document.getElementsByName('IRADIO000');

// ラジオボタンの書き出し値がRedの場合にチェック
var len = radio.length;
for(var i=0 ; i < len ; i++){
    if(radio[i].value == 'Red'){
        radio[i].checked = true;
    }
}

    注意

    スクリプトでchecked属性値やvalue属性値を変更する場合は、以下をご確認ください。

    • ラジオボタンやチェックボックスのchecked属性値を変更する場合

    チェックマーク種別が「グラフィカル」のラジオボタンやチェックボックスに対してchecked属性値を設定した場合、入力フォームの表示には反映されません。 checked属性値設定後、該当オブジェクトに対してiftc.cwf.api.Forms.invokeEvent() を実行することで、入力フォームの表示に反映されます。 詳細は、スクリプトでの更新が反映されないオブジェクト を参照ください。

    • 入力テキストのvalue属性値を変更する場合

    入力テキストオブジェクトは、フォーム上に同名オブジェクトが複数存在すると、入力内容が同名オブジェクト間でコピーされますが スクリプトで値を変更した場合には、同名オブジェクト間でコピーされません。値を変更した後に、フォームオブジェクトのイベント実行 を実施してください。

  • マルチフォームが設定されたフォームの入力テキストの更新

    マルチフォームが設定されたフォームは、同一のフォームを申請時に最大10ページまで追加できます。
    マルチフォームが設定されたフォームで、ページごとに区別するオブジェクト については、ページ数を指定して値を更新する必要があります。

    例として、以下2つのパターンを示します。

    1. フォーム識別子「FORM02」のフォームに配置した入力テキストオブジェクト「ITEXT000」の2ページ目の入力値を更新します。

      // APIをインスタンス化
var forms = new iftc.cwf.api.Forms();

// FORM02の2ページ目のITEXT000の値を「after」で更新
forms.getElementsByName("ITEXT000" , "FORM02" , 2)[0].value = 'after';

    2. フォーム識別子「FORM02」のフォームに配置した入力テキストオブジェクト「ITEXT000」のすべてのページの入力値を更新します。

      // APIをインスタンス化
var forms = new iftc.cwf.api.Forms();

// FORM02のページ数を取得
var cnt = forms.getPageCount("FORM02");

// FORM02のすべてのページのITEXT000の値を「after」で更新
for(var i = 1 ; i <= cnt ; i++){
    forms.getElementsByName("ITEXT000" , "FORM02" , i)[0].value = 'after';
}

    ヒント

    ページごとに区別するオブジェクト

    • マルチフォームが設定されたフォームで、ページごとに入力内容を区別するオブジェクトは、Formエディター上で、 [オブジェクトのプロパティ] - [HTML]で「マルチフォームでオブジェクトをページごとに区別する」にチェックが付いています。

    • マルチフォームが設定されたフォームであっても、[オブジェクトのプロパティ] - [HTML]で「マルチフォームでオブジェクトをページごとに区別する」に チェックがないオブジェクトの場合、マルチフォーム設定のないフォームのオブジェクトと同様の方法で更新します。

  • フォーマットを設定した入力テキスト／計算機能で利用する入力テキストの更新

    [フォーマット] タブで [桁区切り] や [通貨記号] などフォーマットを設定した入力テキストオブジェクト、または、[計算]タブ の [計算に使用するカラム] に指定した入力テキストオブジェクトの値を更新するには、以下のように記載します。
    例として、入力テキストオブジェクト「ITEXT000」の入力値を更新します。

    // APIをインスタンス化
var forms = new iftc.cwf.api.Forms();

// updateValue() を利用し値を更新
// 引数には更新する要素とフォーマット未設定の値を指定する
forms.updateValue(document.getElementsByName("ITEXT000")[0], '1000');

注意

スクリプトでの更新が反映されないオブジェクト

以下のオブジェクトに対して、JavaScriptでchecked属性値を設定した場合、値は設定されますが、入力フォーム上の表示が反映されません。
iftc.cwf.api.Forms.invokeEvent() を使用し、onChange、onBlur イベントを強制実行することで、入力フォーム上の表示が反映されます。

  • 対象となるオブジェクト

    チェックマーク種別が「グラフィカル」に設定された以下のオブジェクト

    • ラジオボタン
    • チェックボックス

  • 実装例

    // APIをインスタンス化
var forms = new iftc.cwf.api.Forms();

// ラジオボタンオブジェクトの配列を取得
var radio = document.getElementsByName('IRADIO000');

// ラジオボタンの書き出し値がRedの場合にチェック
var len = radio.length;
for(var i=0 ; i < len ; i++){
    if(radio[i].value == 'Red'){
        radio[i].checked = true;
        // 入力フォーム上の表示を反映するためのイベントを実行
        forms.invokeEvent(radio[i], "onChange");
        forms.invokeEvent(radio[i], "onBlur");
    }
}
imggotop ページTOPへ

旧バージョン形式のフォーム（JSP）の場合

ここでは以下の操作について説明します。

ヒント

  • 以降の説明のうち、一部の操作では、入力フォーム上のオブジェクトの値を参照・更新するための JavaScript の API （CwfJspFormUtil クラス）を利用します。
    JavaScript API リファレンス もあわせて参照ください。
  • JavaScript で値を更新した場合、JavaScript の仕様上、onChange イベントは実行されません。詳細は、フォームオブジェクトのイベント実行 を参照ください。

設定方法

JavaScript で以下のように記述します。

  • 単一オブジェクトの更新

    単一のオブジェクトを更新します。
    例として、入力テキストオブジェクト「PTEXT000」の入力値を更新します。

    // PTEXT000の値を「after」で更新
document.getElementsByName("PTEXT000")[0].value = 'after';

  • 複数の同名オブジェクトの更新

    ラジオボタンなど複数の同名オブジェクトが存在する場合には以下のように更新します。
    例として、ラジオボタンオブジェクト「PRADIO000」の書き出し値が「Red」のラジオボタンをチェックします。

    // ラジオボタンオブジェクトの配列を取得
var radio = document.getElementsByName('PRADIO000');

// ラジオボタンの書き出し値がRedの場合にチェックする
var len = radio.length;
for(var i=0 ; i < len ; i++){
    if(radio[i].value == 'Red'){
        radio[i].checked = true;
    }
}

    注意

    入力テキストオブジェクトは、フォーム上に同名オブジェクトが複数存在すると、入力内容が同名オブジェクト間でコピーされますが スクリプトで値を変更した場合には、同名オブジェクト間でコピーされません。値を変更した後に、フォームオブジェクトのイベント実行 を実施してください。

  • 桁区切りが設定された入力テキストの更新

    オブジェクトの [フォーマット] タブで [桁区切り] のフォーマットを設定し「桁区切の表記方法- 入力時（JSP）も有効とする」にチェックしている場合、対象オブジェクトのvalue属性にはフォーマット後の値が格納されます。
    このオブジェクトを JavaScript で更新する場合、JavaScript の API（CwfJspFormUtil.cwfWithSeparator()）を利用します。
    例として、入力テキストオブジェクト「PTEXT000」の入力値を更新します。

    // PTEXT000に CwfJspFormUtil.cwfWithSeparator() を利用しフォーマットを設定した値を代入する
document.getElementsByName("PTEXT000")[0].value = CwfJspFormUtil.cwfWithSeparator('1000');

    ヒント

    「桁区切の表記方法- 入力時（JSP）も有効とする」にチェックしていない場合、API を利用しない方法で更新します。

imggotop ページTOPへ

旧バージョン形式のフォーム（PDF）の場合

注意

旧バージョン形式のフォーム（PDF）はサポートを終了しました。
現在公開しているスクリプトは正しく動作しない可能性があります。
記載のスクリプトを利用する際は、事前に正しく動作するか検証してください。

ここでは以下の操作について説明します。

設定方法

Acrobat JavaScriptで以下のように記述します。

  • 入力テキストの値を更新する

    例として、入力テキストオブジェクト「PTEXT000」の入力値を更新します。

    // PTEXT000の値を「after」で更新
this.getField("PTEXT000").value = "after";
imggotop ページTOPへ

フォームオブジェクトのイベント実行

JavaScript の仕様上、value属性で値を変更しても、onChange イベントは実行されません。
ここでは、値を変更した後、onChange イベントを実行する方法を説明します。

注意

本項の内容は「フォーム」および「旧バージョン形式のフォーム（JSP）」で利用できます。
「旧バージョン形式のフォーム（PDF）」では利用できません。

設定方法

  • フォームの場合

    例として、onChange イベントが設定されたオブジェクト「ITEXT000」の値を更新した後に、このオブジェクトの onChange イベントを実行します。
    JavaScript の API（iftc.cwf.api.Forms.invokeEvent）を使用します。

    // APIをインスタンス化
var forms = new iftc.cwf.api.Forms();

// ITEXT000の要素を取得
var obj = document.getElementsByName("ITEXT000")[0];

// ITEXT000の値を「after」で更新
obj.value = 'after';

// イベントを実行するオブジェクトと実行するイベント名(onChange)を引数に指定しイベントを実行
forms.invokeEvent(obj, "onChange");

    ヒント

    iftc.cwf.api.Forms.updateValue() を使って値を変更した場合は、API内部でイベントが実行されるため iftc.cwf.api.Forms.invokeEvent() の呼び出しは不要です。

  • 旧バージョン形式のフォーム（JSP）の場合

    例として、onChange イベントが設定されたオブジェクト「PTEXT000」の値を更新した後に、このオブジェクトの onChange イベントを実行します。
    JavaScript で以下のように記載します。

    // イベントを実行するオブジェクトを変数に格納
var targetObj = document.getElementsByName("PTEXT000")[0];

// 実行するイベント名を変数に格納
var targetEvent = "onChange";

// 値を更新
targetObj.value = "after";

//対象のオブジェクトにイベントが設定されているか判定
if(targetObj.getAttribute(targetEvent) != null){
    //入力テキストのイベントの内容を変数に格納
    var strFun = new String(targetObj.getAttributeNode(targetEvent).value);
    strFun = strFun.replace(/this/g,"targetObj");
    //入力テキストのイベントを実行
    eval(strFun);
}
imggotop ページTOPへ