フォームで郵便番号から住所を自動入力する

明けましておめでとうございます。 :nezumi2:
え？もう年変わって正月終わっちゃったの？という気分なYu-ichiです :neko:

さて、今回はずっと前にエントリーしたと思っていたけど
実はまだ書いていなかったっぽいので、郵便番号から住所を自動入力する方法をご紹介したいと思います。

HTMLで作ったフォームはもちろん、CGIで作られたフォームでも組み込めるので
自由度も高く導入も簡単なので、オススメなスクリプトを配布しているサイトがあります。 :wa-i:
それがこちら→http://www.kawa.net/works/ajax/ajaxzip2/ajaxzip2.html

導入方法はサイトに書いてある通り、まずは【一括アーカイブ】をダウンロードします。 :kaomoji6:

次に、ダウンロードしたファイルを展開して、FTPでルート直下にフォルダごと設置します。
ルート直下じゃなくても大丈夫ですが、いろいろ面倒なのでルート直下がお勧めです。 :yubileft: :kaomoji7:

自動入力させたいフォームのページの<head>～</head>内に以下をコピーします。 :kaoemoji3:

<br />
&lt;pre&gt;&lt;script src=&quot;ajaxzip2/prototype.js&quot;&gt;&lt;/script&gt;<br />
&lt;script src=&quot;ajaxzip2/ajaxzip2.js&quot; charset=&quot;UTF-8&quot;&gt;&lt;/script&gt;</p>
<p>&lt;pre&gt;&lt;script&gt;AjaxZip2.JSONDATA = '/ajaxzip2/data';&lt;/script&gt;&lt;/pre&gt;<br />

3行目のコードは、JSONファイルの設置位置を指定しているので、
ルート直下にフォームのページを設置する場合は、省略可能です。 :wa-i:

次に、フォームの「郵便番号入力欄」と「住所入力欄」に追記します。 :kaomoji6:

今回はシンプルな一行に都道府県と市町村を入力するタイプにしました。
ちなみに、引数はサンプルと同じものを使っています。 :kaomoji1:
変更したい場合は、【addr】の部分をそれぞれ変更してください。 :kaoemoji3:

<br />
&lt;pre&gt;&lt;input type=&quot;text&quot; name=&quot;zip&quot; size=&quot;10&quot; onKeyUp=&quot;AjaxZip2.zip2addr(this,'addr','addr');&quot;&gt;<br />
&lt;br&gt;</p>
<p>&lt;pre&gt;&lt;input type=&quot;text&quot; name=&quot;addr&quot; size=&quot;60&quot;&gt;<br />

一番シンプルなやつですが、参考サイトには都道府県と市町村の入力欄を別にしたものや
もっと複雑なものまでサンプルがあるので、それを参考にしてチャレンジしてみてください。

市町村合併などで住所が変わったりした場合でも、
最新の郵便番号辞書データに更新するだけで対応できるようです。 :cat_5:

でも手間がかかるので自動で更新してくれるプログラムが欲しいところです・・・。 :naku:

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル