フォームに入力した郵便番号から住所を自動入力してくれるjQueryプラグイン「jquery.jpostal.js」

フォームに入力した郵便番号から住所を自動入力してくれるjQueryプラグイン「jquery.jpostal.js」

フォームに入力した郵便番号から住所を自動入力してくれるjQueryプラグイン「jquery.jpostal.js」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加

jquery.jpostal.jsは、フォームで入力した郵便番号から住所を自動的に取得してくれるjQueryプラグインです。フォームで住所を入力してもらう時に、郵便番号を入れるだけで住所欄に住所を自動入力してくれるので、住所入力の手間が省けます。

jquery.jpostal.jsの特徴としては、CDNで提供されているため、ファイルをダウンロードしてサーバーに設置する必要がありません。それに、CDNにホストされているファイルを読み込むため、利用者側で住所のデータを更新するという煩わしさもありません。

動きとしては、以前紹介したjQuery.zip2addrと同じで、郵便番号を入力するとリアルタイムに住所を表示してくれます。ものすごく簡単なデモを用意したので、動作については以下よりご確認ください。郵便番号は、ハイフンありとなし、どちらにも対応しています。

デモページを見る

スポンサードリンク

jquery.jpostal.jsの実装方法

フォームの設置

まずは、フォームを設置します。今回は、以下のように郵便番号にはpostcode、住所にはaddressというIDを付けました。

<form action="">
<label for="postcode">郵便番号</label>:
<input type="text" name="postcode" id="postcode" placeholder="例)123-4567">
<br>
<label for="address">住所</label>:
<input type="text" name="address" id="address" placeholder="住所が自動入力されます">
</form>

IDは任意のものに変更してOKです。

jquery.jpostal.jsの呼び出し

続いて、jQueryとjquery.jpostal.jsを呼び出します。

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>
<script type="text/javascript">
$(window).ready( function() {
$('#postcode').jpostal({
postcode : [
'#postcode'
],
address : {
'#address' : '%3%4%5'
}
});
});
</script>

postcodeとaddressの部分は、フォームで指定したIDを入れてください。

addressのところに入っている「%3%4%5」は、それぞれ以下の値を返します。

書式 項目
%3 都道府県
%4 市区町村
%5 町域
%6 大口事業所の番地
%7 大口事業所の名称

郵便番号欄と住所欄が分割されている場合は、以下のようにそれぞれのIDを指定します。

<script type="text/javascript">
$(window).ready( function() {
$('#postcode1').jpostal({
postcode : [
'#postcode1',
'#postcode2'
],
address : {
'#address1' : '%3',
'#address2' : '%4',
'#address3' : '%5'
}
});
});
</script>

address1には都道府県、address2には市区町村、address3には町域が入ります。

あとがき

より詳しい使い方については、GitHubにてご確認ください。

ちなみに、郵便番号は半角で入力しないと反応してくれません。jQuery.zip2addrは全角で入力しても、自動的に半角に直してくれるので、この点はjQuery.zip2addrの方が優れていると言えますね。

それにしても、ファイルをダウンロードしてきて、サーバーに設置する必要がないという、手軽さは素晴らし過ぎますね。フォームに住所欄を設置している場合は、ぜひお試しください。フォームの離脱率が下がるかもしれませんよ。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。