• RSS

[JS]郵便番号から住所を自動入力できるjavascript 「ajaxzip3」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

お問い合わせフォームや見積フォームで「住所」を都道府県から手打ちで入力するのは面倒ですので、郵便番号を入力するだけでその後の住所を自動入力してくれる javascript「ajaxzip3」が便利です。

郵便番号の入力フォームが3桁 + 4桁と分離されている場合も、7桁でひと続きで入力する場合も、両方対応しています。

また、住所の自動入力は都道府県と市町村以下を分離して自動入力できますし、都道府県以下ひと続きで自動入力することもできますので自由度の高いスクリプトです。

ajaxzip3 の設置

<head> 内に ajaxzip3.js ファイルを設置します。
<head>
<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
</head>

また、以下のページより ajaxzip3.js ファイルをダウンロードして<head> 内に設置しても動きます。
<head>
<script src="./ajaxzip3.js" charset="UTF-8"></script>
</head>


郵便番号7 桁で入力

まずは郵便番号を7桁入力して、都道府県以下の住所を自動入力するコードです。
<input type="text" name="zip01" size="10" maxlength="8" 
onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');">
<input type="text" name="addr11" size="40">
郵便番号 7桁を入力すると、住所が自動入力されます。
郵便番号:
住所:


郵便番号3桁 + 4桁で入力

続いて、郵便番号を3桁 + 4桁で分割して入力するコードです。
<input type="text" name="zip21" size="4" maxlength="3"> - 
<input type="text" name="zip22" size="5" maxlength="4" 
onKeyUp="AjaxZip3.zip2addr('zip21','zip22','addr21','addr21');">
<input type="text" name="addr21" size="40">
4桁目を入力すると、住所が自動入力されます。
※下4桁→上3桁のようにイレギュラーな手法で郵便番号をコピペすると動作しない場合があるので、その場合は下4桁のテキストボックスで数値を打ち直すなどすれば、住所が自動入力されます。
郵便番号:
住所:


都道府県 と 市町村以下を分けて自動入力

今度は、自動入力される住所を都道府県と市町村以下とで分ける場合のコードです。
<input type="text" name="zip31" size="4" maxlength="3"> - 
<input type="text" name="zip32" size="5" maxlength="4" 
onKeyUp="AjaxZip3.zip2addr('zip31','zip32','pref31','addr31','addr31');">
<input type="text" name="pref31" size="20">
<input type="text" name="addr31" size="40">
フォームのレイアウトに合わせて、郵便番号も都道府県以下の住所も自由に組み合わせることができますので便利です。
郵便番号:
都道府県:
市町村:



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.