2009/01/18

Ajaxzip2

べんりなajaxzip2。
郵便番号を入力すると、該当する都道府県名・住所が自動的に入力されます。
AjaxとJSONフォーマットを利用するJavaScriptライブラリとして公開されているものを利用。
JavaScript のみで稼動するため、サーバサイドで稼動するCGIプログラムは不要です。
郵便番号→住所変換処理は全てクライアントサイドのJavaScriptで行います。
既存 HTML の住所入力フォームをたった3行書き換えるだけで利用できます。

住所入力フォームHTMLを書き換える場合は、変更箇所は3行のみです。
まず、 ヘッダー中に以下の2行を追加してください。
script src="ajaxzip2/ajaxzip2.js" charset="UTF-8"

ページ内で既に prototype.js または jquery.js のいずれかを利用している場合、追加するのは ajaxzip2.js の1行のみでOKです。
なお、ajaxzip2.js の文字コードは UTF-8 ですが、呼び出し元のフォームのある HTML ファイルの文字コードは Shift_JIS でも EUC-JP でも構いません。

次に、住所入力フォームの7桁郵便番号入力欄に onKeyUp イベントハンドラを登録します。

input name="zip" type="text"

input name="zip" onkeyup="AjaxZip2.zip2addr(this,'pref','addr',null,'addr');" type="text"

第2引数 'pref' には、都道府県名選択のプルダウン(またはテキスト入力欄も可)のフォーム変数名を指定します。
同様に、第3引数 'addr' に市区町村名以下の住所入力欄のフォーム変数名を指定します。
ご利用のフォームに合わせて、変更しておいてください。