インタラクティブなフォーム生成2



今回は、前回に引き続き、インタラクティブなフォーム生成のサンプルを作ってみます。

今回は、CSVファイルからデータを読み込んでセレクト(オプション)タグとボタンを作ります。

CSVには、都道府県名と、県庁所在地の経度、緯度が、下記ソースのフォーマットで書いてあります。 これを、Ajaxで読み込み、HTML整形してフォーム要素へ加工して出力するという手順です。

最初に、オプションタグを作るサンプルを試してから、次に、同じCSVデータから2種類のフォームを切り替えて生成するサンプルを試します。

前回見たように、必要なデータは、後から、ページ遷移無しで読み込むことができますから、これ以外にも、 ユーザーの入力に対応した、いろいろな組み合わせのフォームをインタラクティブに組み立てていくことが可能です。

暫定Ajax用ライブラリのv036を利用しています。


SELECT要素を1つだけ生成する

Sample
(*このサンプルは上記リンク参照)

このサンプルも前回 同様に、最初のHTMLにはフォーム要素がありませんが、CSVデータを読み込んで、SELECT要素を生成しています。

動作ブラウザ
win mac linux
n7 m1 e6 o7 o8 n7 m1 e5 s1 n7 m1 k3
× ×
 

このサンプルは、ページを読み込むと、まずAjaxライブラリの関数 sendRequest(on_loaded1,'','POST','./ken.csv',true,true)を実行してCSVデータをロードします。

CSVデータの読み込みが終了すると、コールバック関数on_loaded1(oj)が起動して、セレクトタグを生成するという仕組みです。 細かい説明は、ソース内のコメントをご参照下さい。

今回も静的なCSVファイルを利用していますので、SafariとKonqueror対策は、前回と同様に、エンコードファイルをあらかじめ用意して分岐することで行っています。

使用したJavaScript/HTML側とCSV側のソースは、下記の通りです。

【JavaScript側】
 
<!-- Ajax簡易ライブラリ jslb_ajax.js 
http://jsgt.guide.withabout.net/guide_jsgt/gp333/mt/archives/01/000409.html-->
<script languege = "JavaScript"
       src      = "http://jsgt.guide.withabout.net/guide_jsgt/gp333/ajax/ref/lib/jslb_ajax036.js"
       charset  = "utf-8"></script>
  
  <!-- セレクトタグ用 -->
  <div id="sel"></div>
  <!-- データ出力用 -->
  <div id="msg"></div>
    
  <script type="text/javascript">
  <!--

    //KHTML系ブラウザ分岐 Mac SafariとLinux Konqueror用
    ua = navigator.userAgent
    is_KHTML = ( ua.indexOf('Safari') != -1 ||
                 ua.indexOf('Konqueror') != -1 )
    var csv = (is_KHTML)?'./ken2.csv':'./ken.csv';

    //セレクトタグ生成用処理
    // 都道府県庁座標データをAjaxライブラリからリクエスト
    //
    sendRequest(on_loaded1,'','POST',csv,true,true)
  
    //コールバック関数 ( 受信時に実行されます )
    function on_loaded1(oj)
    {
      //レスポンスを取得してデコード
      var text = decodeURIComponent(oj.responseText)
      
      //改行コードで分離して行配列を作ります
      var kens = text.split('?r').join('').split('?n')
      
      //セレクトタグを作ります
      htm = '<select name="id" onChange="handleSelected(this)">?n';
      htm +=  '<option value="0"selected>都道府県を選んでください';
      htm +=  '--都道府県庁を表示します</option> ?n';
  
      //1行ずつ順番に処理します
      for (var i = 0; i < kens.length; i++) {
      
        //カンマ(,)で区切って配列を作ります
        // (CSVは、県名,経度,緯度の順に入っています)
        rows = kens[i].split(',')
        //OPTIONの属性にデータを書き込みます
        htm += '  <option value="'+rows[1]+','+rows[2]+'">'+rows[0]+'</option>?n' ;
        
      }
      htm += '</select> ';
      
      //セレクトタグを出力
      document.getElementById('sel').innerHTML=htm
    }

    //選択時の処理
    function handleSelected(oj) { 
      if (oj.selectedIndex != 0) { 

        ken = oj.options[oj.selectedIndex].text
        point = oj.options[oj.selectedIndex].value
        point = point.split(',')

        var msg =  ken+"庁の<br>経度は、"+point[0]+"<br>緯度は、"
                + point[1]+"<br>の付近です"
        document.getElementById('msg').innerHTML=msg;
      } 
    } 

  //-->
  </script>
  


【csv側】
(ken.csv)
北海道,141.35046,43.06197
青森県,140.74365,40.82178
秋田県,140.10626,39.71539
岩手県,141.15547,39.70096
山形県,140.36452,38.23758
宮城県,140.87549,38.26594
福島県,140.47157,37.74733
新潟県,139.02640,37.89942
東京都,139.69487,35.68627
(ken2.csv))上記test1.txtをencodeURIComponent()したSafariとKHTML用
このエンコードは ここ でも行えます。
%E5%8C%97%E6%B5%B7%E9%81%93,141.35046,43.06197%0D%0A%E9%9D%92%E6%A3%AE%E7%9C%8C,
140.74365,40.82178%0D%0A%E7%A7%8B%E7%94%B0%E7%9C%8C,140.10626,39.71539%0D%0A
%E5%B2%A9%E6%89%8B%E7%9C%8C,141.15547,39.70096%0D%0A%E5%B1%B1%E5%BD%A2%E7%9C%8C,
140.36452,38.23758%0D%0A%E5%AE%AE%E5%9F%8E%E7%9C%8C,140.87549,38.26594%0D%0A
 以下略