Apricot Web Production
- Web Site
お問い合わせフォームなどで住所の入力欄
今までお問い合わせフォームなどで住所の入力欄を作る際、男は黙って「ajaxzip3」を使っていました。
ある日「市町村合併などがあるとどうなるのだろう？」という話になり、改めてajaxzip3のgithubを見たところ
「新規の設置にはyubinbangoライブラリの使用をオススメしています。」
という表記が。ajaxzip3の後継とのことです。
今回は「ajaxzip3」と比較しながら「YubinBango」ライブラリの設置方法について紹介します。
ちなみに、郵便番号の情報は日本郵便の情報を使用しているそうです。
市町村合併などがあった際、ajaxzip3は恐らく開発者の方による手動、YubinBangoは自動で情報の更新。かつ動作の高速化も行われているそうです。
1
ajaxzip3の設置方法
まずはJSを読み込み
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
郵便番号のinputタグのonKeyUp属性に「AjaxZip3.zip2addr(this,”,’都道府県のname値’,’住所のname値’);」を入れます。
郵便番号:
<input type="text" name="郵便番号" onKeyUp="AjaxZip3.zip2addr(this,'','都道府県','住所');"><br>
都道府県:
<input type="text" name="都道府県"><br>
住所:
<input type="text" name="住所">
簡単ですね。
2
YubinBangoの設置方法
まずはJSを読み込み
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
このようにHTMLを作ります。
<form class="h-adr">
<span class="p-country-name" style="display:none;">Japan</span>
郵便番号:
<input type="text" class="p-postal-code"><br>
都道府県:
<input type="text" class="p-region"><br>
住所:
<input type="text" class="p-locality p-street-address p-extended-address">
</form>
市区町村も分ける場合、このように作ります。
<form class="h-adr">
<span class="p-country-name" style="display:none;">Japan</span>
郵便番号:
<input type="text" class="p-postal-code"><br>
都道府県:
<input type="text" class="p-region"><br>
市区町村:
<input type="text" class="p-locality"><br>
以降の住所
<input type="text" class="p-street-address p-extended-address"><br>
</form>