つながるnet

郵便番号入力で住所自動入力するシンプルな Javascript

今回はレアな情報ではありませんが、お問い合わせフォームなどで郵便番号を入力すると住所を自動入力してくれるjavascriptです。

Javascript
スクリプトの実行にはjQueryが必要です。

<script type="text/javascript">
jQuery(function($){

		// 郵便番号入力による住所自動入力
		$('#zipcode').change(function(){

				var zip = $(this).val();
				var url = 'http://api.zipaddress.net?callback=?';
				var query = {'zipcode': zip};
				$.getJSON(url, query, function(json){

					/* json.pref        都道府県の取得
					 * json.address     市区町村の取得
					 * json.fullAddress 都道府県+市区町村の取得 */
					$('#pref').val(json.pref);
					$('#addr').val(json.address);

				});

		});

});
</script>

html

<form action="">
	<label for="zipcode">郵便番号</label><input id="zipcode" name="zipcode" size="10">
	<label for="pref">都道府県</label><input id="pref" name="zipcode" size="40">
	<label for="addr">市区町村</label><input id="addr" name="zipcode" size="40">
</form>

デモ
デモ:別ウィンドウで動作を確認できます。

ちょっとだけ解説

上記スクリプトでは 郵便番号-住所検索API を利用させていただいています。

特に余計なことはしていないので、割と高速に動作するものと思います。

WordPressにでもどこにでも実装できる

シンプルなスクリプトですからどこにでも設置できます。

冒頭で述べたとおりお問い合わせフォームというのが一般的な使い方だと思いますが、その他にも、ユーザー登録フォームプロフィールページカスタムフィールドの住所入力などなど

WordPressのカスタム投稿タイプで動作させる実装例

条件設定としては、カスタム投稿タイプのスラグがestate、WordPressプラグイン Advanced Custom Fields でカスタムフィールドを実装しているとして(そうでなくても同様)

functions.phpに記述:

function my_print_footer_scripts() {
	global $post_type;
	// 投稿タイプがestateなら
	if ($post_type == 'estate'): ?>
<script type="text/javascript">
	jQuery(function($){

		// 郵便番号入力による住所自動入力
		$('#acf-field-zipcode').live('change', function(){
			var zip = $(this).val();
			var url = 'http://api.zipaddress.net?callback=?';
			var query = {'zipcode': zip};
			$.getJSON(url, query, function(json){
				$('#acf-field-addr').val(json.fullAddress);
			});
		});

	});
</script>
<?php
	endif;
}

// admin_print_footer_scriptsにフックしてestateの投稿画面表示時の下部にスクリプトを設置
add_action('admin_print_footer_scripts', 'my_print_footer_scripts', 21);

これで、カスタム投稿タイプがestateの投稿画面にのみ実装されます。

直接メールしてみる

お名前 (必須)
メールアドレス (必須)
件名
ご相談内容
画像文字をご入力ください
captcha

コメントを残す