てるてるブログ

てるてるぼうずの日常やらお勉強やら

郵便番号の自動入力 「jquery.jpostal.js」

Posted on | 7月 14, 2015 | No Comments

jquery

お問合せなどの入力フォームで住所を入力する時に便利なのが、郵便番号を入力すると住所が自動的に入力されてくれる仕様。
最近はお客さんの方からも「ああいうのにして!」と言われるパターンもあって、そんだけ一般的になってきたんだなぁと(いまさら…)

jQueryプラグインでもいくつかあるのだけど、とりあえず最近使ってるのは「jquery.jpostal.js」。

jpostal.googlecode.comで公開もされているので、直接リンクして使うことも可能。

ダウンロードとかなら↓
https://github.com/ninton/jquery.jpostal.js

Googleコードは↓
https://code.google.com/p/jpostal/

直接リンクだとメンテが不要と言うことで楽かもしれませんね。

head内にjqueryとjquery.jpostal.jsをjsファイルを読み込み。

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>

郵便番号が繋がってるパターン

$(function(){
 $('#postcode').jpostal({
    postcode : [
        '#postcode',   //郵便番号
    ],
    address : {
        '#city'  : '%3',   //都道府県
        '#add1'  : '%4',   //市区町村
    '#add2'  : '%5',   //町域
    }
 });
});

サンプル

郵便番号
都道府県
市区町村
町域

郵便番号を分けたパターン

postcode : [
        '#postcode1',   //郵便番号1
        '#postcode2',   //郵便番号2
    ],

住所欄を一つにまとめるパターン

address : {
        '#city'  : '%3',
        '#add1'     : '%4%5',
}

サンプル

郵便番号
都道府県
市区町村・町域

都道府県はテキストフィールドにしてみた…

入力項目フォーマットは↓

  • %3 都道府県
  • %4 市区町村
  • %5 町域
  • %6 大口事業所の番地
  • %7 大口事業所の名称
  • %8 都道府県カナ
  • %9 市区町村カナ
  • %10 町域カナ(予定)
トラックバックURL:

Comments

Leave a Reply





*

About

てるぼうず

てるてるぼうずな日常やらお勉強やら

旧ブログ倉庫 »
旧ブログの記事をお探しの方はこちらから

Admin