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



前回前々回は、SQLなツールを利用したJavaScriptでSQL掲示板郵便番号、住所 検索でしたが、 今回は、ひさしぶりにシンプルなAjaxサンプルを作ってみます。

今回試してみるのは、フォームの部品を、ユーザーの応答に合わせて、インタラクティブに読み込んでみようというものです。

普通のHTMLのFORM要素は、最初からすべての要素がページ内で完結していますが、Ajaxを使えば、最初のHTMLには、 実は、FORM要素も、INPUT要素さえも存在しなくても良いのです。

必要な要素は、後から、ページ遷移無しで読み込むことができますから、ユーザーの入力に対応した、無数の組み合わせの中から、 ユーザー専用のフォーム要素だけを、あとから順次読み込んで、インタラクティブに組み立てていくことができるのです。


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


INPUT要素を1つだけ読み込む

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

とりあえず、簡単なサンプルをためしてみましょう。 最初のHTMLにはフォーム要素がありませんが、ボタンクリックで、INPUT要素を一つだけ読み込んでみます。

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

このサンプルは、ボタンをクリックすると、関数loadForms()が起動して、テキストファイルを読み込み、ファイル内に記述されたINPUT要素を表示します。

使っている、ライブラリは、おなじみのものなので、コールバック後の動作もいつも通りですが、今回は、少しだけ新しい小技を使っています。 Mac SafariとLinux KonquerorがUTF-8の文字列をうまく読み込めないのに対応して、いままでは、すべてをエンコードしていました。 しかし、今回は、この2つのブラウザだけを分岐する方法にしてみました。

ファイルは2つ作らなければなりませんが、 問題の発生するブラウザの処理だけを切り離し、 IEやFierfox、Operaなどのブラウザでは エンコードすることによる文字量の増加を避けることができます(もちろん、サーバー側プログラムを用意できる方には一般的には不要な処理ですが…)。

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

【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>

<script language = "JavaScript">
<!--

       var ua     = navigator.userAgent
       var safari = ua.indexOf('Safari') != -1 ,
       var khtml  = ua.indexOf('Konqueror') != -1 

       //コールバック関数 ( 受信時に実行されます )
       function on_loadedToDIV1(oj){
              //URLデコード
              res  =  decodeURIComponent(oj.responseText)
              //レスポンスされた文字列をDIVへ出力
              document.getElementById("div1").innerHTML=res
       }

       //送信用関数
       function loadForms(){
  
              //ブラウザ分岐
              if(safari||khtml) url = 'test2.txt' //URIエンコードあり
              else              url = 'test1.txt' //URIエンコードなし
  
              sendRequest(
                     on_loadedToDIV1,      //DIV1用のコールバック関数
                     '', 'POST',           //データ と HTTPメソッド
                     url,                  //URL
                     true,true             //非同期 強制ロード
              ) 
       }
  
//-->
</script>

<body>
ボタンを押すとINPUTタグが読み込まれます
<br>
<input type="button"
       value="INPUTを読み込みます" 
       onclick="loadForms()"> 
         
<!-- ここへ出力します -->
<div id="div1"></div>
  


【text側】
(test1.txt)
<input value="こんにちは" type="text" name="input1">
(test2.txt)上記test1.txtをencodeURIComponent()したSafariとKHTML用
%3Cinput%20value%3D%22%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%8
1%AF%22%20type%3D%22text%22%20name%3D%22input1%22%3E