AjaxZip 2.0 を使って住所を自動入力

a-blog cms で company1のテーマのお問い合わせフォームに AjaxZip 2.0（郵便番号から住所を検索するJS）を標準インストールにしようかと思っていたのですが、ちょっとファイルサイズが大きいので同梱するのは辞める事にした。 なので、その方法を書いてみる事にしました。

まずは、AjaxZip 2.0 をダウンロードします。そして、以下の場所にアップロードします。 標準で jquery.js は読み込んでいますので、今回は jquery.js や prototype.js は必要ありません。

/js/ajaxzip2/ajaxzip2.js
/js/ajaxzip2/data （ディレクトリ）

これで、ファイルの設定は完了です。

次に、この JS とデータを読み込む設定を

/themes/company1/contact.html

に

<script src="/js/ajaxzip2/ajaxzip2.js" charset="UTF-8"></script>
<script>AjaxZip2.JSONDATA = '/js/ajaxzip2/data';</script>

を ＜/head＞の前に書きます。次は、contact.html で include している form/input.html を編集します。

<input size="12" value="{zip}" name="zip" type="text" />

を

<input size="12" value="{zip}" name="zip" type="text" onKeyUp="AjaxZip2.zip2addr(this,'pref_code[]','address');" />

のように onKeyUp="AjaxZip2.zip2addr(this,'pref_code[]','address');" を追記します。これでとりあえず、都道府県のプルダウンと住所のTEXTAREAに編集されるようになります。AjaxZip 2.0 のページに設定例がいろいろ書かれていますので、そのフォームにあわせたものは設定を変更下さい。

ここで大事なのは、どこにファイルを置き、そのファイルの置き場をどう指定するかくらいだと思います。AjaxZip 2.0が良く出来ているので、いろいろなフォームで活用できるようになっています。 川崎さん、いいモノを作られていますね。 ありがとうございます。

今回のサンプルのファイルをダウンロードできるようにしました。

AjaxZip 2.0は別途ダウンロード下さい。