現在位置: ホーム / こだまのたまご / クエステトラ(Questetra）でJavascriptを活用しよう（選択値の活用）

クエステトラ(Questetra）でJavascriptを活用しよう（選択値の活用）

クエステトラでは、データ項目の説明文にJavascriptやjQueryを活用することができます。これらを使った利用方法について説明します。その中でも選択肢の値が「○○」だったら、「☓☓」するという処理はよく利用すると思いますので、まずはその方法の説明です。
クエステトラ(Questetra）でJavascriptを活用しよう（選択値の活用）

クエステトラ社のページにも既にこれらの利用方法が記載されているのですが、私自身は、JavascriptもjQueryの経験が無く苦労したこともあり、ここでは、もう少し具体例をあげたいと思います。

 jQueryで各データ項目を指定する方法

まずは、jQueryで各データ項目を参照する方法が必要になります。これは、クエステトラ社のページにも記載されていますが、ここではよく使うものをリストとして書いておきます。[ ]内の番号がデータ番号になります。

  • 文字型単一行/数値型/日付型（jQuery上は、全て単純な文字として扱われます）
    jQuery('input[name="data[2].input"]')
  • 文字型複数行
    jQuery('    textarea[name="data[50].input"]')
  • 選択型セレクト
    jQuery('select[name="data[11].selects"]')
  • 選択型ラジオボタン/チェックボックス
     jQuery('input[name="data[0].selects"]').
  • 上記の全ての型を「表示のみ」の属性にした場合
    jQuery('#readonly_86')  //86がデータ番号になります。

 
これらの参照方法を踏まえて、以下の選択肢リストを使った方法を説明します。

１）選択肢リストで選択した値により処理を行う

選択肢のデータ項目の際に、どれかの値を選択した時に処理をさせたい場合、この例では、「お花」（選択肢Valueは、5）を選択した時に、データ番号２と３５の文字列型データ項目に「お花のため関係なし」という文字を入力させるという処理になります。

 

 

<script type="text/javascript">
jQuery(document).ready(function(){
     var Kind; // 種別
     jQuery(function($) {
         jQuery('select[name="data[11].selects"]').change(function(){
             Kind = jQuery(this).val();
             if (Kind == "5" ){ // お花の場合
                 jQuery('input[name="data[2].input"]').val( "お花のため関係なし" );
                 jQuery('input[name="data[35].input"]').val( "お花のため関係なし" );
             }
         });
     });
});
</script>

 

２）他のデータ項目をチェックして、その結果により、選択肢の値を変更する

この例では、予算に金額を入れると参加者から一人あたりの金額が計算され、その一人あたりの金額が５０００円以上の場合には、費用種別を「交際費」にするという処理になります。

このスクリプトのポイントは、replaceメソッドを使って、一人あたりの金額に含まれる「円」と「、（カンマ）」を文字列から取り除くところです。jQueryの場合には、表示されているHTML文字を取得してくるために、Questetra側で数値型に設定し、「句読点はカンマ」とし、接尾文字に「円」の設定をしているとそれらの文字も取得してしまうために、Javascript内で数字として扱うためには、それらの文字を取り除く必要があります。

<script type="text/javascript">
jQuery(document).ready(function(){
    var revenueKind; // 一人あたりの費用
    jQuery('input[name="data[20].input"]').change(function(){
        revenueKind = jQuery(this).val();
        submitNumber =　revenueKind.replace( "円","" ).replace( /,/gi , "" ); //引数に円と,が入っていたらそれを削除する。引数を文字列で送られてくる場合のため
        if (Number(submitNumber) >= 5000 ){ //
            jQuery('select[name="data[11].selects"]').val(['1']); 　//選択肢IDの1を選択する
        } else { 
        jQuery('select[name="data[11].selects"]').val(); // 　//選択肢IDの選択値をクリアする
        }
    });
});
</script>

 

３）選択肢型データだけど、「表示のみ」になっているデータの種類により、背景色を変更する

経費系の申請では、その予算があるかないかをチェックしたいことはあるかと思います。「予算ステータス」は、選択型セレクトになっていて、「予算あり」「予算超過」「予算なし」の３つのステータスがあります。それらのステータスごとに背景色とフォントを変更しています。
「予算あり」＝薄い青色、「予算超過」＝黄色、フォント太字、「予算なし」＝赤色、フォント太字

<script type="text/javascript">
jQuery(document).ready(function(){
     var OK = "予算あり";
     var Exceed = "予算超過";
     var No_Code = "予算なし";
     var p_props = {
        "background-color" : "#F0F8FF" //予算ありの場合をデフォルトの薄い青色にする
     }

var budgetKind_all = jQuery('#readonly_46').text(); //予算ステータスの取得
var budgetKind = budgetKind_all.match(/予算超過/);　//HTML内にある文字前後にゴミが入っているのでそれを取り除く
if ( budgetKind == Exceed ) {　//予算超過の場合
    var p_props = {
        "background-color" : "Yellow",
        "font-size" : "16px",
        "font-weight" : "bold"
    }
} else {
    budgetKind = budgetKind_all.match(/予算なし/);
    if ( budgetKind == No_Code) { //予算なしの場合
        var p_props = {
            "background-color" : "Red",
            "font-size" : "16px",
            "font-weight" : "bold"
        } 
    }　//IF分終了
} 　//elseの終了
jQuery('#readonly_46').css(p_props);　//色、フォントの変更
});
</script>

 

クエステトラは、利用を開始して６年半が経ちましたが、新しい機能が追加されると、その都度チャレンジしていますが、このJavascriptが使えるようになり、かなりユーザインターフェースは改良でき、入力のミスや利用者への気づきというのを提供できているように思えます。Javascript自体は、それほど難しいものではないので、多少なりともプログラミング経験がある方であえれば、チャレンジしてみては如何でしょうか？

（次回は、ラジオボタンの操作方法です）

最近のエントリ