ajaxzip3 APIを使うと、入力した郵便番号から住所を得ることができる。
使い方は以下のとおり。
ajaxzip3 APIの組み込み
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>検索フォーマット
<div class="wrapper">
<div class="content">
<label>郵便番号</label>
<span class="content_form">
<input id="zip" name="zip" type="text">
</span>
<span class="content_form">
<input class="studentEnrollment_button" type="button" value="住所を自動で入力する">
</span>
</div>
<div class="content">
<label>都道府県</label>
<span class="content_form">
<input id="state" name="state" type="text">
</span>
</div>
<div class="content">
<label>市区町村</label>
<span class="content_form">
<input id="city" name="city" type="text">
</span>
</div>
<div class="content">
<label>番地</label>
<span class="content_form">
<input id="address1" name="address1" type="text">
</span>
</div>
</div>
【javascript】
jQuery(function($){
$('input[type="button"]').click(function(){
// 郵便番号から住所を取得
var zip = $('#zip').val();
// zipのバリデーション
if( ! check_zipcode( zip ) ) {
alert('郵便番号が正しくありません');
return false;
}
AjaxZip3.zip2addr('zip','','state','city','address1');
});
});
function check_zipcode( zipcode ) {
if( ! zipcode ){
return false;
}
if( 0 == zipcode.length ){
return false;
}
if( ! zipcode.match( /^[0-9]{3}[-]?[0-9]{0,4}$/ ) ) {
return false;
}
return true;
}
サンプル