エプソンダイレクト株式会社
Home > 2013年6月12日(水曜日)

2013年6月12日(水曜日)

郵便番号からの住所入力を簡略化する ajaxzip3.js

Category: Tips, Web | Posted By at 23:41:34

http://code.google.com/p/ajaxzip3/

ajaxzip3.js は、郵便番号から住所の情報を引っ張ってくることで
住所入力の手間を軽減するためのものです。
導入については

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>

とするだけで組み込め、

<input type="text" name="zip" onkeyup="AjaxZip3.zip2addr(this,'','pref','city','area','street');">

のようにすると各フォームに自動入力されます。
結構住所入力って手間なのでこれで軽減できるのではないかと思います。

ajaxzip3.js での住所入力ですが、
input タグの name 属性をパラメータとして持ちます。

AjaxZip3.zip2addr( 郵便番号上三桁, 郵便番号下四桁, 都道府県, 市区町村, 所番地, 丁目番地 );

のように 6 個のパラメータを持ちますので
それぞれ

<input type="text" name="zip3">
<input type="text" name="zip4" onkeyup="AjaxZip3.zip2addr( 'zip3', 'zip4', 'pref', 'city', 'area', 'street' );">
<input type="text" name="pref">
<input type="text" name="city">
<input type="text" name="area">
<input type="text" name="street">

のようにしておけば自動入力できます。

また

<input type="text" name="zip" onkeyup="AjaxZip3.zip2addr( this, '', 'pref', 'city', 'area', 'street' );">
<input type="text" name="pref">
<input type="text" name="city">
<input type="text" name="area">
<input type="text" name="street">

とすれば郵便番号七桁からの変更も可能です。

省略すると前のものにまとめて表示されますので、

<input type="text" name="zip" onkeyup="AjaxZip3.zip2addr( this, '', 'pref', 'other' );">
<input type="text" name="pref">
<input type="text" name="other">

としてやれば都道府県以外はまとめて表示されます。

HP Directplus -HP公式オンラインストア- デル株式会社 東芝ダイレクト 富士通パソコンFMVの直販サイト富士通 WEB MART ソフマップ・ドットコム