コンボボックスの書き出し値を計算に使用する

✔ 概要

コンボボックスで選択した項目の書き出し値を使用して、JavaScript で計算する方法を説明します。
ここでは、コンボボックスに設定された税率の書き出し値を利用して、税込み金額の計算を JavaScript で行う方法を紹介します。

注意

本設定は、V5形式のフォームで利用可能な JavaScript を使用します。
Liteフォームおよび旧バージョン形式のフォーム（JSP／PDF）では利用できません。

ヒント

JavaScript を使用せずオブジェクトの「計算」機能を利用しての計算もできます。
「計算」機能はオブジェクトのプロパティ - [計算]タブより設定します。

設定方法

フォームの設定

Formエディターを起動し、申請フォームに税率を設定したコンボボックスと計算に使用する入力テキストを配置します。

オブジェクトの配置／設定

  • 申請フォームにコンボボックスを1つ、入力テキストを2つ配置します。

    項目 オブジェクト オブジェクト名 用途
    税率 コンボボックス COMBO_TAX 税率を選択するためのコンボボックスです。
    このオブジェクトで税率を選択したときに税率計算を行い
    結果を「税込み金額」に格納します。
    金額 入力テキスト WITHOUT_TAX 税率計算前の金額を入力するためのオブジェクトです。
    このオブジェクトに値を入力したときに税率計算を行い
    結果を「税込み金額」に格納します。
    税込み金額 入力テキスト WITH_TAX 計算した結果の金額を格納するオブジェクトです。

  • コンボボックス「COMBO_TAX」を以下のように設定します。
    選択項目（税率）を変更したときに、JavaScript で金額と選択した税率を使用して税込み金額を計算します。

    • [オプション]タブ

      項目名 書き出し値
      8% 1.08
      10% 1.1

    • [HTML]タブ

      項目 設定値
      JavaScript

      トリガー／JavaScriptイベントで以下を選択します。

      トリガー 内容を変更する
      JavaScriptイベント名 onChange

      トリガーを選択後、[編集]ボタンをクリックし、以下のスクリプトを設定します。

      // コンボボックスで選択された書き出し値を取得
let valTax = document.getElementsByName('COMBO_TAX')[0].value;

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

// フォーマットが設定されたオブジェクトの要素を取得
let objWithoutTax = document.getElementsByName("WITHOUT_TAX")[0];

// getRawValue() でフォーマット未設定の値を取得
let valWithoutTax = forms.getRawValue( objWithoutTax );

// 入力された金額と税率から計算
let val =  valWithoutTax * valTax;

// 小数の処理（切り捨て）
// 切り捨てはMath.floor(),切り上げはMath.ceil(),四捨五入はMath.round()
let valWithTax = Math.floor( val );

// 結果を格納
forms.updateValue( document.getElementsByName("WITH_TAX")[0], valWithTax );

      注釈

      「COMBO_TAX」「WITHOUT_TAX」「WITH_TAX」の部分には、オブジェクトの配置／設定 で配置したオブジェクト名を記載してください。

  • 金額を入力する入力テキスト「WITHOUT_TAX」を以下のように設定します。
    入力値を変更したときに、JavaScript で入力した金額と税率を使用して税込み金額を計算します。

    • [フォーマット]タブ

      項目名 書き出し値
      分類 数値
      小数点以下の桁数 0
      有効桁以下の処理 切捨て
      桁区切の表記方法 1,234.56

    • [HTML]タブ

      項目 設定値
      JavaScript

      トリガー／JavaScriptイベントで以下を選択します。

      トリガー 内容を変更する
      JavaScriptイベント名 onChange

      トリガーを選択後、[編集]ボタンをクリックし、以下のスクリプトを設定します。

      // コンボボックスで選択された書き出し値を取得
let valTax = document.getElementsByName('COMBO_TAX')[0].value;

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

// フォーマットが設定されたオブジェクトの要素を取得
let objWithoutTax = document.getElementsByName("WITHOUT_TAX")[0];

// getRawValue() でフォーマット未設定の値を取得
let valWithoutTax = forms.getRawValue( objWithoutTax );

// 入力された金額と税率から計算
let val =  valWithoutTax * valTax;

// 小数の処理（切り捨て）
// 切り捨てはMath.floor(),切り上げはMath.ceil(),四捨五入はMath.round()
let valWithTax = Math.floor( val );

// 結果を格納
forms.updateValue( document.getElementsByName("WITH_TAX")[0], valWithTax );

      注釈

      「COMBO_TAX」「WITHOUT_TAX」「WITH_TAX」の部分には、オブジェクトの配置／設定 で配置したオブジェクト名を記載してください。

  • 計算結果を格納する入力テキスト「WITH_TAX」を以下のように設定します。
    JavaScript の計算結果を格納するため読取専用とします。

    • [表示]タブ

      項目 設定値
      読取専用 チェック

    • [フォーマット]タブ

      項目名 書き出し値
      分類 数値
      小数点以下の桁数 0
      有効桁以下の処理 切捨て
      桁区切の表記方法 1,234.56

注釈

コンボボックスと入力テキストに設定する JavaScript は同じ内容です。

ヒント

JavaScript を外部ファイルとして登録し、外部ファイルに記載した JavaScript 関数を呼び出すことも可能です。
JavaScript ファイルの登録については、 外部ファイルとしてJavaScriptを登録する を参照ください。

フォームの保存、アップロード

Formエディターでフォームを保存し、フォームをサーバーにアップロードします。

動作確認

ワークフローシステムにログインし、申請フォームを表示します。
税率のコンボボックスや金額を入力して、税込み金額が表示されることを確認します。
imggotop ページTOPへ