オープンソースWebDBのプリザンター(pleasanter)ブログ

オープンソースのWebDBのプリザンターのブログです

オープンソースWebDB「プリザンター」のブログです。 機能の紹介や実例を交え、わかりやすく解説していきます。

2つの入力項目を連結して別の項目に表示したい!

こんにちは。
リーデックス小川です。

今回は、プリザンター公式FAQのサンプルプログラムを実際に試してみたいと思います。2つの入力項目を連結して別の項目に表示するサンプルとなります。JavaScriptがあまり詳しくない方でも、比較的簡単に実現できると思いますので、ぜひチャレンジしてみてください。

 サンプルコード:複数の項目の値を結合し1つの項目に自動入力したい(ID:266424)

公式FAQ:https://pleasanter.net/fs/publishes/266424/edit

それでは、サンプルのテーブルを作ってみます。今回は、姓と名を別々に入れると、姓+名の名前が表示されるようなサンプルを作成します。
分類A:姓、分類B:名、分類C:姓+名(名前)を作成します。テーブルは期限は不要なので、記録テーブルとして作成します。

f:id:h-ogawa-reedex-co-jp:20190423200545p:plain

 

さて、公式FAQでは、下記のようなサンプルコードが載っています。

$(document).on('change', '#Results_ClassA, #Results_ClassB' , function() {
 var A = $('#Results_ClassA').val();
 var B = $('#Results_ClassB').val();
 $p.set($('#Results_ClassC'), A + B);
})

 

実は、これをそのままスクリプトに張り付けるとできてしまいます(笑)。スクリプトに張り付けるやり方は、下記URLを参考にしてみてください。

pleasanter.hatenablog.jp

 

このままだとあまりにもなので、少しだけ補足をさせてもらいます。公式サイトにも書いてありますが、記録テーブルの分類AはResult_ClassAというIDです。期限付きテーブルの場合は、Result_がIssues_に代わります。このResult_やIssues_についてですが、HTMLのhiddenで設定されています。jQueryでの取得方法は、

$("#TableName").val();

です。これを組み込んでみましょう。onChangeイベントは、設定されている項目(ここでは分類AとB)が変わったら、というイベントです。詳細については、下記URLを参考にしていただくとよいかもしれません。

【10分でマスター】onChangeでフォームの項目をコントロールしよう | 侍エンジニア塾ブログ(Samurai Blog) - プログラミング入門者向けサイト

 

var table = $("#TableName").val();
var classA = "#" + table + "_ClassA";
var classB = "#" + table + "_ClassB";
var classC = "#" + table + "_ClassC";
var change = classA + ", " + classB;

$(document).on('change', change , function() {
 var A = $(classA).val();
 var B = $(classB).val();
 $p.set($(classC), A + B);
})

 少し冗長になってしまいましたが、より汎用性は増したのではないかと思います。上記をスクリプトに組み込み、動かしてみましょう。

画面で確認してみる。

さて、それでは、実際に入力してみましょう。まずは、姓に「テスト」と入力してみます。

f:id:h-ogawa-reedex-co-jp:20190423202712p:plain


その後フォーカスを外してみると・・・

f:id:h-ogawa-reedex-co-jp:20190423202833p:plain


名前部分に「テスト」が表示されましたね。次は、名に「太郎」と入力してフォーカスを外してみると・・・

f:id:h-ogawa-reedex-co-jp:20190423203018p:plain


名前に「テスト太郎」と表示されました。これはいろいろと応用が利きそうですね。例えば、数値Aに単価、数値Bに個数を入力すると数値Cの合計に数値A×数値Bを表示する、といったことも簡単にできそうです。こちらもぜひチャレンジしてみてください。

 

まとめ

今回は、項目を連携して別の項目に表示するサンプルを作成してみました。プリザンターはJavaScrptで様々なカスタマイズができますので、ぜひいろいろとチャレンジしてみてください。

それでは、また次回お会いしましましょう。
最後までご覧いただき、ありがとうございました。