郵便番号から該当する住所を自動で入力できるjQueryプラグイン「jquery.jpostal.js」

公開日：2015/11/18

jQuery プラグイン

ホームページを制作する時にお問い合わせや資料請求などのフォームを設置することがあるかと思います。

そのフォーム内の入力項目で住所の入力欄があった場合、郵便番号を入力しただけで該当する住所が自動入力されたら便利ですよね。
下記のjQueryプラグインを使用すれば簡単に導入することが可能です。

jquery.jpostal.js

今回は「jquery.jpostal.js」というjQueryのプラグインを使用して郵便番号から住所を自動入力する方法をご紹介します。

郵便番号から住所を自動入力「jquery.jpostal.js」の使い方

使い方はとても簡単です。
下記に「jquery.jpostal.js」を使用する時の手順を説明します。

※例：郵便番号と住所の入力欄が1個ずつの場合

jquery_jpostal_js_1

ファイル読込

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>

1 2	<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>

HTML

郵便番号と住所の入力欄を用意します。

郵便番号<br>
<input type="text" id="zip" name="zip"><br>
住所<br>
<input type="text" id="address" name="address">

郵便番号<br>

住所<br>

JS

「jquery.jpostal.js」を動かします。
HTMLで指定したidを設定します。

<script>
$(function () {
	$('#zip').jpostal({
		postcode : [
			'#zip'
		],
		address : {
			'#address' : '%3%4%5'
		}
	});
});
</script>

$(function () {

$('#zip').jpostal({

postcode : [

'#zip'

address : {

'#address' : '%3%4%5'

}

});

</script>

この場合は住所の入力欄に都道府県、市区町村、町域の情報が全て入力されます。

設定はこれでOKです。
郵便番号を入力すると住所が自動で入力されます。
ちなみにハイフンを入れて入力した場合も正常に動きます。

下記が入力項目のフォーマットです。

%3：都道府県
%4：市区町村
%5：町域
%6：大口事業所の番地
%7：大口事業所の名称
%8：都道府県カナ
%9：市区町村カナ
%10：町域カナ(予定)

サンプル

下記が「jquery.jpostal.js」を使用したデモページです。
郵便番号を入力すると住所欄が自動で入力されます。

「jquery.jpostal.js」プラグインを使用したデモページ

下記違うパターンの設定例を記述します。

郵便番号の入力欄が2個の場合

jquery_jpostal_js_2

<script>
$(function () {
	$('#zip1').jpostal({
		postcode : [
			'#zip1',
			'#zip2'
		],
		address : {
			'#address'  : '%3%4%5'
		}
	});
});
</script>


郵便番号<br>
<input type="text" id="zip1" name="zip1"> - <input type="text" id="zip2" name="zip2"><br>
住所<br>
<input type="text" id="address" name="address">

$(function () {

$('#zip1').jpostal({

postcode : [

'#zip1',

'#zip2'

address : {

'#address' : '%3%4%5'

}

});

</script>

郵便番号<br>

住所<br>

都道府県がセレクトボックスの場合

jquery_jpostal_js_3

<script>
$(function () {
	$('#zip').jpostal({
		postcode : [
			'#zip'
		],
		address : {
			'#pref'  : '%3',
			'#address'  : '%4%5'
		}
	});
});
</script>


郵便番号<br>
<input type="text" id="zip" name="zip"><br>
住所<br>
<select id="pref" name="pref">
	<option value="">----</option>
	<option value="北海道">北海道</option>
	<option value="青森県">青森県</option>
	<option value="岩手県">岩手県</option>
	<option value="宮城県">宮城県</option>
	<option value="秋田県">秋田県</option>
	<option value="山形県">山形県</option>
	<option value="福島県">福島県</option>
	<option value="茨城県">茨城県</option>
	<option value="栃木県">栃木県</option>
	<option value="群馬県">群馬県</option>
	<option value="埼玉県">埼玉県</option>
	<option value="千葉県">千葉県</option>
	<option value="東京都">東京都</option>
	<option value="神奈川県">神奈川県</option>
	<option value="新潟県">新潟県</option>
	<option value="富山県">富山県</option>
	<option value="石川県">石川県</option>
	<option value="福井県">福井県</option>
	<option value="山梨県">山梨県</option>
	<option value="長野県">長野県</option>
	<option value="岐阜県">岐阜県</option>
	<option value="静岡県">静岡県</option>
	<option value="愛知県">愛知県</option>
	<option value="三重県">三重県</option>
	<option value="滋賀県">滋賀県</option>
	<option value="京都府">京都府</option>
	<option value="大阪府">大阪府</option>
	<option value="兵庫県">兵庫県</option>
	<option value="奈良県">奈良県</option>
	<option value="和歌山県">和歌山県</option>
	<option value="鳥取県">鳥取県</option>
	<option value="島根県">島根県</option>
	<option value="岡山県">岡山県</option>
	<option value="広島県">広島県</option>
	<option value="山口県">山口県</option>
	<option value="徳島県">徳島県</option>
	<option value="香川県">香川県</option>
	<option value="愛媛県">愛媛県</option>
	<option value="高知県">高知県</option>
	<option value="福岡県">福岡県</option>
	<option value="佐賀県">佐賀県</option>
	<option value="長崎県">長崎県</option>
	<option value="熊本県">熊本県</option>
	<option value="大分県">大分県</option>
	<option value="宮崎県">宮崎県</option>
	<option value="鹿児島県">鹿児島県</option>
	<option value="沖縄県">沖縄県</option>
</select>
<input type="text" id="address" name="address">

$(function () {

$('#zip').jpostal({

postcode : [

'#zip'

address : {

'#pref' : '%3',

'#address' : '%4%5'

}

});

</script>

郵便番号<br>

住所<br>

</select>

ボタンをクリックした後に住所を入力する場合

jquery_jpostal_js_4

スクリプトに「click : ‘#btn’,」を追加しています。

<script>
$(function () {
	$('#zip').jpostal({
		click : '#btn',
		postcode : [
			'#zip'
		],
		address : {
			'#address' : '%3%4%5'
		}
	});
});
</script>


郵便番号<br>
<input type="text" id="zip" name="zip"> <input type="button" id="btn" name="btn" value="クリック"><br>
住所<br>
<input type="text" id="address" name="address">