memorandum
thinking about creation

更新不要!郵便番号から住所入力するJQueryプラグイン「jquery.jpostal.js」

Entry Date _ 2016.04.25
/
ModifiedDate _ 2016.06.28

フォームの住所入力において、郵便番号から住所を補完する方法はいくつかありましたが、日々更新されていく郵便番号のデータを更新していかなければならないことが厄介です。...と思っていたのですが、jquery.jpostal.jsを使えばその必要もなくなります。

設置方法は、まずヘッダー内にNinton G.K.が提供しているjpostal-1006.appspot.com にある jquery.jpostal.js を直接読み込みます。GitHubのプロジェクトからファイルをダウンロードして使用することもできますが、サーバから直接読み込むことで定期的な郵便データ更新作業が必要なくなります。

以下のようなフォームであった場合、

郵便番号
-

都道府県

市区町村

町域

大口事業所の番地

大口事業所の名称

都道府県カナ

市区町村カナ

スクリプトは以下のようになります。jquery.jpostal.jsを適用するセレクタは郵便番号の一つ目になります。この場合「#zip1」になります。

$(window).ready( function() {
	$('#zip1').jpostal({
		postcode : [
			'#zip1',	//郵便番号1
			'#zip2' 	//郵便番号2
		],
		address : {
			'#adrs3'  : '%3',	//都道府県
			'#adrs4'  : '%4',	//市区町村
			'#adrs5'  : '%5',	//町域
			'#adrs6'  : '%6',	//大口事業所の番地
			'#adrs7'  : '%7',	//大口事業所の名称
			'#adrs8'  : '%8',	//都道府県カナ
			'#adrs9'  : '%9'	//市区町村カナ
		}
	});
});

サンプル

郵便番号(※入力してください)
-

都道府県

市区町村

町域

大口事業所の番地

大口事業所の名称

都道府県カナ

市区町村カナ

Category

memorandum index