株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

     横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

jQuery

51-17) 1. 郵便番号から住所の自動表示

 

郵便番号から住所の自動表示を行なう。

郵便番号を入力するだけで、該当する住所が自動入力(補完)される仕組みを、
自サイト内に設置する方法で、 郵便番号から住所入力する 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>


郵便番号から住所を自動表示する

必須お名前 :name  
フリガナ :name  
必須 郵便番号postcode (郵便番号の住所を表示します)   郵便番号を調べる
必須ご住所address
  1. 都道府県
  2. 市区町村
  3. 丁目番地
どこでこのサイトを  
知りましたか? :web site  



  アンケートにご協力ありがとうございました。