Tweet

Pocket

郵便番号を入力したら住所が自動反映されるというもの。
「ajaxzip3」というライブラリを使うことで、割と簡単に実装できたので、
メモしておきます。

サンプルページは　→→こちら

「jaxzip3」の実装コード

まず、ajaxzip3のスクリプトを読み込みます。インターネット上に公開してくれているので、URLで読み込むことができます。

郵便番号を入力してボタンを押すと住所を補完

郵便番号を入力後、「住所表示」というボタンをクリックすると住所が自動表示されるケースを作成しました。

HTML

郵便番号


 - 


				

ご住所
都道府県



市区町村

番地・マンション名など<input id="address3" type="text" name="番地・マンション" value="" class="recruit_address contact_banchi">

CSS

.contact th{
	width:240px;
	padding:18px 0;
	vertical-align: top;
	font-size: 18px;
	text-align: left;
}

.contact td{
	font-size: 18px;
	padding:5px 0;	
}

.contact td input{
	padding:18px 15px 15px;
	background-color: #f4f4f4;
	border:none;
	font-size:18px;
}
.contact_zip {
    width: 200px;
}

.contact_zip_left{
	margin-right:20px;
}

.contact_zip_right{
	margin-left:20px;
	margin-right:20px;
}

.contact_name{
    width: 300px;
}

.contact_mail{
	width:750px;
}

.recruit_address {
    margin: 3px 0;
}

.contact_button_jushohyoji{
	vertical-align: middle;
}

.contact_button_jushohyoji:hover{
	opacity:.7;
}

.contact_todofuken{
	width:300px;
	margin-bottom:10px;
	margin-left:50px;
}

.contact_shikuchouson{
	width:630px;
	margin-bottom:10px;
	margin-left:50px;
}

.contact_banchi{
	width:510px;
	margin-left:44px;
}

Javascript

$(function() {
                $('.js-button').click(function(){
                    AjaxZip3.zip2addr('郵便番号1', '郵便番号2', '都道府県', '市区町村');
                });
            });