Tweet

Pocket

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

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

「jaxzip3」の実装コード

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

　
<script type="text/javascript" src="https://ajaxzip3.github.io/ajaxzip3.js"></script>

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

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

HTML

<section class="contact table">
<table>
<tr>
<th>郵便番号
<td class="dotborder">
<input id="post1" class="contact_zip contact_zip_left" type="text" name="郵便番号1" value=""  >
 - <input id="post2" class="contact_zip contact_zip_right" type="text" name="郵便番号2" value=""  >
<img class="js-button contact_button_jushohyoji" src="img/contact_button_address.jpg" alt="住所表示">
</td>
</tr>
				
<tr>
<th>ご住所
<td class="dotborder">都道府県
<input id="address1" type="text" name="都道府県" value="" class="recruit_address contact_todofuken"  >
<br />
市区町村<input id="address2" type="text" name="市区町村" value="" class="recruit_address contact_shikuchouson"  >
<br />番地・マンション名など<input id="address3" type="text" name="番地・マンション" value="" class="recruit_address contact_banchi">
</td>
</tr>
</table>
</section>

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', '都道府県', '市区町村');
                });
            });

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

参考ページ
・https://haniwaman.com/ajaxzip3/
・https://cortyuming.hateblo.jp/entry/2016/11/18/171521