選択数を取得して選択肢を制御する

  • 更新

選択項目の選択肢について、現在のデータベース内での選択されている数を取得できる機能が[選択数を取得するURL発行]です。
この機能は、下記のようなことに活用できます。

  • 選択肢ごとに、あと何回分その選択肢を選択した登録が可能か表示する。
  • 上限(満席等)に達した選択肢を非表示にする
  • 選択肢の現在の登録人数を表示する

ただし、利用には下記のような注意点がございます。

  • 取得される選択数情報は最大30秒のタイムラグがある。
  • Javascriptで制御プログラムを作成しなければならない
  • 選択肢情報を取得したタイミングがフォームを最初に読み込んだタイミングだけである場合、登録済みの実数との乖離が大きくなるため、確認画面の送信ボタンクリック時にも情報を再チェックしたほうが良い

この機能については、過去に実施したワークショップの資料が詳しいため下記ページでじっくり試しながらご確認いただくことをおすすめします。

クライゼルワークショップ「残席数表示フォームを作ろう」資料ページ

基本の操作手順

1 データベースに選択肢が作成されていない場合は、まず選択項目を作成します。
[データベース]>[項目の設定]を開き、「単一選択」か「複数選択」を追加します。
追加した項目の[設定]を開き、選択肢を作成します。

2 続いてフォームを設定します。(フォームはすでに作成されていることを前提とした説明となります。)
[フォーム]>[フォーム一覧]を選択>
[データベース一覧]にて対象となるデータベース名称の[フォーム一覧]>
対象となるフォームの[項目]をクリックします。
[フォーム項目の設定]画面が表示されます。

3
対象の選択肢項目の[設定]を開き、選択肢の表示名を確認し(※1)、[選択数を取得するURLを発行]の「発行する」にチェックを入れ、[次へ→]>[実行→]で保存します。

※1 : 選択肢の表示名に上限値を記述するコードを利用する場合はここで記述します。

4 ここからはフォームタイプが自動生成かデザインかで設定メニューの差があります。

自動生成タイプの場合

対象フォームの[デザイン]を開き、[配置]タブにて「テキスト」要素を追加します。
[設定]を開きます。
[表示するテキスト]欄にJavascriptコードを設定します。設置するコードについては、下記のような違いで変わります。

  • 選択肢の表示形式がチェックボックスか、ドロップダウンリストか、ラジオボタンか
  • 満席になった際、選択肢を非表示にするのか、表示したまま選択不可にするのか

それぞれのコードのサンプルは5で後述します。
[差込記号]のリンクを開き、[選択数取得URL]タブから記号を確認し、コード中に設置します。
[表示方法]で[HTMLタグ有効]を選択し、[次へ→]>[実行→]で保存します。

 

このテキスト要素が入力画面でのみ表示されるように、[表示]欄の「入力」以外の各画面のチェックボックス欄のチェックを外して、[次へ→]で保存します。

確認画面についても上記同様に必要に応じてコードを追加します。

デザインタイプの場合

確認画面の[ソース]についても必要に応じてコードを追加します。

対象フォームの[デザイン]を開き、入力画面の[ソース]欄にコードを追加します。
[設定]を開きます。

[差込記号]のリンクを開き、[選択数取得URL]タブから記号を確認し、コード中に設置します。
[次へ→]>[実行→]で保存します。

存します。

 

確認画面の[ソース]についても必要に応じてコードを追加します。

5 4で設置するコードは下記を参考にしてください。

実施したい内容別サンプルコード

  • 下記サンプルコードではjQueryというJavascriptのライブラリを活用しているため、jQueryファイルをコードの前で読み込ませる必要があります。
    下記のファイルをダウンロードしてファイル置き場にアップロードし、サンプルコードの1行目のように差込記号で読み込ませてください。
    ダウンロードはこちら
[ラジオボタンで残席を表示] サンプルダウンロード
[ドロップダウンリストに残席を表示] サンプルダウンロード
[記号で残席を表示]  サンプルダウンロード
[残席を非表示] サンプルダウンロード

[ドロップダウンリストに残席を表示し、残席がない場合は非表示]

サンプルダウンロード
[ラジオボタンに残席を表示し、残席がない場合は非表示] サンプルダウンロード
[チェックボックスに残席を表示し、残席がない場合は非表示] サンプルダウンロード

注意

  • この機能は「選択肢の選択数を制御する機能」ではございません。あくまでも「表示時点の選択されている選択肢数を取得するだけの機能」となります。
  • 選択肢数の反映はJavascriptで行うため、選択肢の数などにより処理に時間がかかる場合がございます。また、Javascriptが有効ではないエンドユーザには反映できません。
  • 複数選択項目での設定可能な選択肢数は50個までとなります。51個以上のご利用は出来ません。
  • 今回用意したjQueryや上記ヘッダ情報はあくまでもサンプルになります。HTMLソースコードの編集やJavaScriptの記述方法などを含め、最新版のjQuery適用やフォームの挙動に関しては、ご自身で検証してください。
  • 選択数を表示するJavaScriptを記載したフォームをコピーした場合、[##]で囲まれた項目のID(ファイル置き場内URL、選択数取得URL)はコピーされたフォームのIDに置換されますが、[e_]で指定されたIDに関しては置換されませんので、該当フォームの項目IDを確認し編集いただく必要がございます。
  • サンプルのソースを変更したい、カスタマイズしたい、といったご要望は、有償にてトライコーンの代行サービスにて承ります。お気軽にご相談ください。