横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
郵便番号から住所の自動表示を行なう。
郵便番号を入力するだけで、該当する住所が自動入力(補完)される仕組みを、
自サイト内に設置する方法で、
郵便番号から住所入力する jQueryプラグイン
(jQueryプラグイン: jquery.jpostal.js )を活用します。
1) jquery.jpostal.js の読み込み
<script src="http://code.jquery.com/jquery-1.11.0.min.js"
type="text/javascript"></script>
2) 住所の表示を指定するスクリプトの指定。
都道府県名(%3) : 神奈川県
市区町村名(%4) : 横浜市神奈川区
町名(%5) : 鶴屋町
番地(%6) : 2-23-5
'#address2' : '%4%5' は 『市区町村』に横浜市神奈川区鶴屋町 と文字列の結合を行う
jQueryの書き方 |
/*------------------------------------ */ // 51-17) 1. 郵便番号から住所の自動表示 /*------------------------------------ */ <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#postal').jpostal({ postcode : ['#postcode'], address : {'#address1' : '%3' , '#address2' : '%4%5' , '#address3' : '%6' } }); }); |
---|---|
cssの書き方 |
------------------ |
HTMLの書き方 |
<tr> <th> <img src="../images/mail_must.png" alt="必須" class="must" /> 郵便番号<span>postcode</span></th> <td> <input type="text" id="postcode" name="郵便番号" size="10" class="validate post required" /> (郵便番号の住所を表示します) <a href="http://www.post.japanpost.jp/zipcode/" target="_blank">郵便番号を調べる</a> </td> </tr> <tr> <th> <img src="../images/mail_must.png" alt="必須" class="must" />ご住所<span>address</span></th> <td> <ol> <li><span>都道府県</span> <input type="text" id="address1"name="都道府県" size="50" class="validate required" /></li> <li><span>市区町村</span> <input type="text" id="address2"name="市区町村" size="50" class="validate required" /></li> <li><span>丁目番地</span> <input type="text" id="address3"name="丁目番地" size="50" class="validate required" /></li> </ol> </td> </tr> |