勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

郵便番号を入力すると住所を自動で入力してくれる「ajaxzip3」ライブラリの利用方法

  JavaScript

お問い合わせフォームのようなページで郵便番号及び住所欄がある場合、ユーザーが郵便番号を入力すると自動で住所欄も入力される機能を「ajaxzip3」ライブラリで実装することが多い。ただ、本サイトに実装方法をメモしておらず毎回過去に実装したソースコードを探し出すという無駄な作業をしていたのでこの機会にメモしておく。

 

サンプル

https://taitan916.info/sample/ajaxzip3/

フォームによっては郵便番号欄を分けたり、都道府県と住所を分けたりと様々なパターンがあるので、使いそうな4パターンを上記で試すことができる筈。

 

ajaxzip3

公式サイト

https://yubinbango.github.io/

GitHub

https://github.com/ajaxzip3/ajaxzip3.github.io

CDN

CDNで使う場合は以下を記述する。

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

 

実装方法

ソースコード

<div class="contents">
    <div class="title">郵便番号入力欄が1つ&都道府県と住所別の場合</div>
    <div>
        郵便番号
        <input type="text" name="zip_1" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','pref_1','addr_1');">
    </div>
    <div>
        都道府県
        <input type="text" name="pref_1">
    </div>
    <div>
        住所
        <input type="text" name="addr_1">
    </div>
</div>

<div class="contents">
    <div class="title">郵便番号入力欄が1つ&都道府県と住所分けない場合</div>
    <div>
        郵便番号
        <input type="text" name="zip_2" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr_2','addr_2');">
    </div>
    <div>
        住所
        <input type="text" name="addr_2">
    </div>
</div>

<div class="contents">
    <div class="title">郵便番号入力欄が2つ&都道府県と住所別の場合</div>
    <div>
        郵便番号
        <input type="text" name="zip_3_1" size="4" maxlength="3"> - <input type="text" name="zip_3_2" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip_3_1','zip_3_2','pref_3','addr_3');">
    </div>
    <div>
        都道府県
        <input type="text" name="pref_3">
    </div>
    <div>
        住所
        <input type="text" name="addr_3">
    </div>
</div>

<div class="contents">
    <div class="title">郵便番号入力欄が2つ&都道府県と住所分けない場合</div>
    <div>
        郵便番号
        <input type="text" name="zip_4_1" size="4" maxlength="3"> - <input type="text" name="zip_4_2" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip_4_1','zip_4_2','addr_4','addr_4');">
    </div>
    <div>
        住所
        <input type="text" name="addr_4">
    </div>
</div>

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

 - JavaScript

  関連記事

JavaScriptでWebカメラやスマホカメラを利用してQRコードを読み取りURLを返す方法

JavaScriptのjsQRというライブラリで簡単にWebページ版QRコードリ ...

jQueryで指定の行動をとった際に、クリックイベントを発火させる方法

あるシステムでAという要素をクリックした際に何らかの処理を行うという部分があり、 ...

「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法

「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...

エリア→都道府県→路線→駅名を連携する絞り込みセレクトメニューの設置方法

エリア→都道府県→路線→駅名のドリルダウン検索をプルダウン形式で設置したい。以前 ...

セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法

セレクトメニュー(プルダウン)に対してdisplay:none;指定したりjQu ...