ajaxzip3の住所自動入力機能

ajazxip3とは、『株式会社人気組』さんが無料で公開されているjavascriptライブラリ。jQueryプラグインではないのでjQueryファイルの読み込みも不要、コードも2行足らずで完了。初めての人にも簡単に導入できると思います。

サンプルページを用意しましたので、実際の動きを確認したい方は以下からどうぞ。

サンプルページ

また、外部ファイルとして読み込んで利用できるので、仮に将来的に郵便番号や都道府県・市区町村の名前が変更になってとしても、元ファイル側で新情報へ更新されると問題解決。住所自動入力機能を実現したいなら、これを使わない手はないでしょう。私自身、とても重宝しています。

ajaxzip3の導入方法

使い方はすごく簡単。headにjsファイルを読み込ませて、対応フォームでスクリプトを実行するだけ。たったこれだけです。

head内には、

<script type="text/javascript" src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js"></script>

と記述して、外部JSファイルを読み込ませます。

で、あとは郵便番号を入力するフォームに、

onKeyUp="AjaxZip3.zip2addr('A','B','C','D');"

のように、javascriptの「onKeyUp」イベントハンドラを仕込めば完了です。「onKeyUp」イベントハンドラは、キーボードのキーを放したら指定した処理を実行させるjavascriptの命令コードです。これを郵便番号の入力欄に仕込むことで、郵便番号にキーが打ち込まれると処理が実行されるようになります。

上記のA~Dの個所ですが、

A
郵便番号の入力欄の名前。
B
郵便番号の入力欄が前半3桁と後半7桁で分かれる場合の後半の入力欄の名前。入力欄が1つの場合は未記入にする。
C
都道府県を表示させる住所入力欄の名前。
D
市区町村を表示させる住所入力欄の名前。都道府県と同じ場合は同じ名前を記述する。

となります。詳しい記述方法については以下で紹介します。

郵便番号欄が1つのケース

住所欄が1つ

まずは一番シンプルなパターンから。郵便番号を入力するフォームを1つ設置して、そこに入力された郵便番号から住所フォームに住所が自動入力される仕様です。

コードは以下になります。

<form method="post">
<dl>
<!--郵便番号-->	
	<dt>
		郵便番号 (ハイフンはあってもなくてもOK)
	</dt>
	<dd>
		<input type="text" name="zip" size="8" onKeyUp="AjaxZip3.zip2addr('zip','','addr','addr');">
	</dd>
<!--住所-->
	<dt>
		住所
	</dt>	
	<dd>
		<input type="text" name="addr" size="40">
	</dd>
</dl>
</form>

郵便番号の入力欄は「zip」、住所入力欄は「addr」です。この場合の指定方法は、

('zip','','addr','addr')

となります。

住所欄が2つ

続いて住所入力欄が2つの場合。

コードは以下になります。

<form method="post">
<dl>
<!--郵便番号-->	
	<dt>
		郵便番号 (ハイフンはあってもなくてもOK)
	</dt>
	<dd>
		<input type="text" name="zip" size="8" onKeyUp="AjaxZip3.zip2addr('zip','','addr1','addr2');">
	</dd>
<!--住所-->
	<dt>
		住所
	</dt>	
	<dd>
		<input type="text" name="addr1" size="40"><br>
		<input type="text" name="addr2" size="40">
	</dd>
</dl>
</form>

郵便番号の入力欄は「zip」、都道府県の入力欄は「addr1」、市区町村の入力欄は「addr2」です。この場合の指定方法は、

('zip','','addr1','addr2')

となります。

郵便番号欄が2つのケース

住所欄が1つ

続いて郵便番号7桁を2つに分けて入力する場合の例。

コードは以下になります。

<form method="post">
<dl>
<!--郵便番号-->	
	<dt>
		郵便番号
	</dt>
	<dd>
		<input type="text" name="zip1" size="4">-
		<input type="text" name="zip2" size="4" onKeyUp="AjaxZip3.zip2addr('zip1','zip2','addr','addr');">
	</dd>
<!--住所-->
	<dt>
		住所
	</dt>	
	<dd>
		<input type="text" name="addr" size="40">
	</dd>
</dl>
</form>

郵便番号の前半の入力欄は「zip1」、後半の入力欄は「zip2」、住所の入力欄は「addr」です。この場合の指定方法は、

('zip1','zip2','addr','addr')

となります。

住所欄が2つ

続いて、郵便番号も住所も入力欄が2つある場合の例。

コードは以下になります。

<form method="post">
<dl>
<!--郵便番号-->	
	<dt>
		郵便番号
	</dt>
	<dd>
		<input type="text" name="zip1" size="4">-
		<input type="text" name="zip2" size="4" onKeyUp="AjaxZip3.zip2addr('zip1','zip2','addr1','addr2');">
	</dd>
<!--住所-->
	<dt>
		住所
	</dt>	
	<dd>
		<input type="text" name="addr1" size="40"><br />
		<input type="text" name="addr2" size="40">
	</dd>
</dl>
</form>

郵便番号の前半の入力欄は「zip1」、後半の入力欄は「zip2」、都道府県の入力欄は「addr1」、市区町村の入力欄は「addr2」です。この場合の指定方法は、

('zip1','zip2','addr1','addr2')

となります。

都道府県欄がプルダウンの場合

都道府県の項目がプルダウンの場合、上記のコードの都道府県の個所をプルダウン形式にしてあげるだけでOKです。特に何もする必要はなく、郵便番号を入力すれば自動で選択した状態にしてくれます。

[応用] 検索ボタンで住所欄を自動入力させる

上記の方法が基本的な使い方です。これだけでも十分なのですが、以前にお客様から「検索というボタンを押したら住所が表示されるようにしたい」という依頼を受けたことがあり、それ用にカスタマイズをしたことがあります。場合によっては、同じようなものが必要となる方もいるかもしれないので、簡単ではありますがこの場でご紹介しておきます。

<form method="post">
<dl>
<!--郵便番号-->	
	<dt>
		郵便番号
	</dt>
	<dd>
		<input type="text" name="zip2_1" size="4">-
		<input type="text" name="zip2_2" size="4">
		<input type="button" onclick="AjaxZip3.zip2addr('zip2_1','zip2_2','addr1','addr2');" value="検索">
	</dd>
<!--住所-->
	<dt>
		住所
	</dt>	
	<dd>
		<input type="text" name="addr1" size="40"><br />
		<input type="text" name="addr2" size="40">
	</dd>
</dl>
</form>

まぁ、大層なことはしてません。ボタンを設置して、そこに「onclick」を仕込んで実装するだけです。必要なケースが発生した場合にはどうぞご活用ください。