オブジェクトを条件によって非表示とする

✔ 概要

フォーム上で配置したオブジェクトを非表示とするときは JavaScript を使用します。
コンボボックスやラジオボタンの選択状態を条件として、入力テキストの表示／非表示を動的に変更することができます。

本項では、JavaScript を使用したオブジェクトの表示状態を変更する方法と注意事項を説明します。

注意

本項で説明する内容は、申請や承認時のプレビュー、「申請済み」や「完了」などの各一覧から確認できる文書（PDF）には反映されません。
詳細は 「注意事項」 を参照してください。

注意

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

参考


表示状態を変更する方法

オブジェクトの表示状態は、以下のプロパティ[表示]タブの項目[プロパティ]-[表示]で指定できますが、 ここで指定した内容はフォームを表示したときの初期状態として反映するため、常に表示する状態となります。

オブジェクトの表示状態を動的に変更するときは以下の JavaScript で設定を変更します。 この JavaScript を任意のタイミングで実行することでオブジェクトの表示を制御できます。

// 入力テキスト「ITEXT000」の表示状態を「非表示」とする
document.getElementsByName( 'ITEXT000' )[0].style.visibility = "hidden";

// 入力テキスト「ITEXT000」の表示状態を「表示」とする
document.getElementsByName( 'ITEXT000' )[0].style.visibility = "visible";
imggotop ページTOPへ

実用例

想定する動作

コンボボックスで選択した項目によって入力テキストの表示状態を変更します。 コンボボックスの選択項目として「その他」を選択したときは入力テキストを表示しますが、「a／b」を選択したときは非表示とします。

◇フォームの配置状況

◇コンボボックスの選択項目における入力テキストの動作

コンボボックスの項目名 入力テキストの表示状態
a　（初期選択項目） 非表示
b 非表示
その他 表示


フォームの設定

オブジェクトの配置

入力テキストとコンボボックスを配置します。コンボボックスは下表のように選択項目を登録します。

コンボボックス「CMB」のプロパティ 登録する選択項目の内容
項目名 書き出し値
a　※初期選択項目 1
b 2
その他 0

JavaScriptの登録

入力テキストの表示を制御するJavaScriptは下表のタイミングで実行するため、それぞれの設定箇所へ登録します。

実行するタイミング 目的
コンボボックスの選択項目を変更したとき 変更後の選択項目に対する設定を入力テキストへ反映するため
フォームを表示したとき フォームを表示した直後の選択項目に対する設定を入力テキストへ反映するため


コンボボックスの選択項目を変更したときに実行する JavaScript

コンボボックスのプロパティ[HTML]タブの[onChange]イベントへ以下の JavaScript を登録します。
登録する JavaScript の処理内容は、コンボボックスの選択項目が「その他」を選択しているか確認して入力テキストの表示を変更します。

◇登録する JavaScript

//コンボボックスの参照
let combo = document.getElementsByName( 'CMB' )[0];

//選択している項目の番号を取得
let sel = combo.selectedIndex;

//番号を指定した項目名の取得
let txt  = combo.options[sel].text;

//選択した項目が「その他」であるときの制御
if( txt == 'その他' ){
  //選択項目が「その他」であるときの処理
  document.getElementsByName( 'ITEXT000' )[0].style.visibility = "visible";
}else{
  //選択項目が「その他」以外であるときの処理
  document.getElementsByName( 'ITEXT000' )[0].style.visibility = "hidden";
}

◇[onChange]イベントへの JavaScript 登録

フォームを表示したときに実行する JavaScript

設定箇所は 「入力フォーム表示時のJavaScript」 へ記載の[ページ表示時の JavaScript 登録]から起動するダイアログです。 [ページ表示時のJavaScriptの編集]ダイアログで設定した JavaScript は、フォームを表示したとき、フォームにページを追加したときなどのタイミングで実行できます。

「コンボボックスの選択項目を変更したときに実行するJavaScript」 を [ページ表示時の JavaScript 登録]から起動するダイアログへ登録します。

ヒント

  • このタイミングで JavaScript を実行することで、フォームを表示した直後に入力テキストの設定を変更できます。
  • JavaScript を外部ファイルとして用意することも可能です。
    外部ファイルとして用意するときは 「外部ファイルとしてJavaScriptを登録する」 を確認してください。

動作の確認

フォームを表示したときに登録したJavaScriptが実行されます。
このときコンボボックスの初期選択項目は「a」となるため入力テキストは下図のように非表示となります。 また、「b」を選択したり、他の選択項目から「a」を選択したときも同一の表示状態となります。

コンボボックスの選択項目で「その他」を選択したとき、登録したJavaScriptが実行されて入力テキストが表示されます。

imggotop ページTOPへ

注意事項

オブジェクトの表示を制御するときの注意点を説明します。

JavaScriptで設定した表示制御はPDFには反映されない

JavaScript で設定した表示制御はフォーム上でのみ有効となります。
申請や承認を確定したときの文書（PDF）やPDFプレビューの結果に対しては、JavaScript で設定した表示状態を反映できません。

以下のように入力テキストを JavaScript で非表示として PDF プレビューしたとき、PDFでは入力テキストが表示されます。

フォームの表示状態 PDFプレビューでの表示状態

※青色の部分は入力テキストへ設定した背景色の出力です。

PDFへ反映できる表示制御はオブジェクトのプロパティで２通りの指定があります。 [表示]タブの項目[出力時]-[設定]から起動する[出力時表示設定]ダイアログで指定しますが、指定する内容によって反映する情報が異なります。

指定値 PDF出力時に使用する設定
[表示]設定の値を使用する

プロパティの[表示]タブで設定した内容を使用します。
オプション設定を使用する

[出力時表示設定]ダイアログで指定した内容を使用します。


オブジェクトの表示位置は変更できない

オブジェクトの表示位置は Form エディターで配置した位置で固定となります。 オブジェクトを非表示としたとき、レイアウトとしてそのオブジェクトより下段にあるオブジェクトを上へ詰めて表示することはできません。

下図の「３行目」の入力テキストを非表示としたとき、非表示とした入力テキストの表示のみを制御します。

表示を変更する前の状態 表示を変更した後の状態

以下のように「４行目」「５行目」の部分を上側へ詰めて表示することはできません。


固定オブジェクトは制御できない

固定テキストや直線オブジェクトなどの固定オブジェクトは制御できないため、これらのオブジェクトはフォーム上に配置した状態で常に表示します。


imggotop ページTOPへ