郵便番号からの住所入力補助

Kawa.net
http://www.kawa.net/works/ajax/ajaxzip2/ajaxzip2.html
「AjaxZip2 の導入手順」を見てやればオッケーでした。
郵便番号データはちょびちょびと更新されるので、入替方法も。
日本郵便のサイトの「郵便番号検索」→「郵便番号データのダウンロード」からダウンロードします。
http://www.post.japanpost.jp/zipcode/
で、ダウンロードしたファイルを、以下のブログの方が変換ツールを作ってくださってるのでダウンロードします。で、ダウンロードしたphpプログラムを使ってjson形式に変換します。
子だぬきの技術習得ノート(2008年12月5日の記事)
http://www.okushin.co.jp/kodanuki_note/2008/12/ajax.html
できたjsonデータを「AjaxZip2」の「data」フォルダに配置すればオッケー。

個人的に、入力時に勝手に内容を書き換えられちゃうのが好きじゃないので、ボタンを押したら住所を書き換えるようにしました。
こんな感じで。(jsフォルダを作成し、その中にライブラリとjsonファイルを配置しました。)
head部に以下の内容を記述します。(ライブラリの読込とjsonファイルの場所指定。)
あ、「prototype.js」か「jquery.js」を使います。(AjaxZip2の中に一緒に含まれてるのでそれを使えばいいと思います。)

<script src="../js/prototype.js" type="text/javascript"></script>
<script src="../js/ajaxzip2/ajaxzip2.js" type="text/javascript"></script>
<script>AjaxZip2.JSONDATA = '../js/ajaxzip2/data';</script>

body部の適当な位置に以下のように記述します。

〒<input type="text" value="" name="zipcode1" id="zipcode1"  />-<input type="text" value="" name="zipcode2" id="zipcode2" />&nbsp;
<input type="button" onclick="AjaxZip2.zip2addr('zipcode1', 'ken', 'address1', 'zipcode2');" value="住所を検索" /><br />
<select name="ken" id="ken">
<option label="" value="00"></option>
<option label="北海道" value="01">北海道</option>
(中略)
</select>
<input type="text" value="" name="address1" id="address1" /><br />
<input type="text" value="" name="address2" id="address2" /><br />

配置して丸コピーしたらすぐ動くものが好きです。
ありがとうございます。ありがとうございます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です