エプソンダイレクト株式会社

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">

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

コメント&トラックバック

トラックバックは締め切りました。

蛇足です。
ajaxzip3、これで満足できる方は良いですね。
私はどうも気になって仕方がありません。
1)郵番が438-0078はどうなりますか?
2)都道府県欄はselect文にできますよね。
3)細かいところは色々と。
問題があるということを知って頂きたくてコメントを入れました。
(郵便番号の体系そのものにも問題ありますが)
PRになりますが、http://zipaddr.com/ 評価してみて下さい。

>照沼辰郎さん
こんにちは
ajaxzip3.js は MIT ライセンスなので本当に縛りがなくて楽なのですが、
zipaddr ってライセンスはどうなんでしょう?
明記がなかったので…。
また時間があれば評価してみたいと思います。
パッと見で中身を見てないのですが
ガイダンスがパカパカ出るのがちょっと気になりました。
これってオフにできるのでしょうか?

問題と思われていないのでしたら評価は不要と思います。
失礼しました。

どんなシステムも問題と利便性の両方を持っています。
ライセンスについてのお答えがなかったのが残念です。
今回の ajaxzip3.js は MIT ライセンスだったので
重宝するなぁと思っていたのですが。

コメント





XHTML: 以下のタグが利用可能です。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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