【ajaxzip3】ボタンクリックで郵便番号から住所を取得する方法

こんにちは、Ryohei（@ityryohei）です！

本記事では、ajaxzip3を使って、ボタンをクリックして郵便番号から住所を取得する方法をご紹介しています。

ajaxzip3を公式ページのサンプルに沿って設置した場合、郵便番号の入力完了後、対応する住所があれば予め指定して置いた入力フィールドに取得してきた住所を出力してくれます。郵便番号入力で瞬時に住所を取得してきてくれます。

もちろんそれだけでもかなり使い勝手は良いのですが、案件によっては入力完了後に自動で取得するのではなく、ワンクッション挟んで住所を出力して欲しい、という要望をいただいたりします。それが本記事でご紹介するボタンを使用する方法になります。

下記は、完成形のデモになります。郵便番号を入力して「郵便番号から住所を取得」をクリックすると、取得してきた住所が入力フィールドに出力されます。

See the Pen
Click the button to run ajaxzip3 1 by ryohei (@intotheprogram)
on CodePen.

本記事では、上記デモの内容に沿って、郵便番号入力後にボタンをクリックして住所を取得する方法をご紹介していきたいと思います。「ajaxzip3」の詳しい使い方については説明しておりませんので、予めご了承ください。

では、解説していきます。

ajaxzip3を読み込む

ajaxzip3のライブラリファイル本体は下記のページからダウンロードすることができます。

ajaxzip3.github.io

圧縮ファイルを展開すると、ディレクトリの中に「ajaxzip3.js」というファイルが内包されています。それがライブラリ本体のファイルになります。ajaxzip3を使用するファイルに読み込みむことで各機能を使用することができます。

また、公式からCDNが提供されています。

CDN

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

CNDを使用する場合は上記の読み込むだけで準備は完了です。使いやすい方法で「ajaxzip3」を使用するファイルにライブラリファイルを読み込みます。

※デモではjQueryを使用していますので、併せて読み込んでおきましょう。

jQuery

<script src="https://code.jquery.com/jquery-3.4.1.min.js"</script>

ajaxzip3を使用するフォームを作成する

続いて、フォームを作成していきます。デモと同じ内容のサンプルを下記に用意しております。郵便番号を入力して「郵便番号から住所を取得」のボタンをクリックすると、都道府県、市区町村、町名にそれぞれ住所が出力されます。使用するフィールドは必要な部分だけを取捨選択してご使用ください。

<form>
    <input type="text" name="zip" class="zip" value="" placeholder="例：1234567">
    
    <button type="button" class="ajaxzip3" href="#">郵便番号から住所を取得</button>
    
    <select name="pref" class="pref">
        <option value="" selected="">都道府県</option>
        ...省略
    </select>
    
    <p>市区町村</p>
    <input type="text" name="addr1" class="addr1" value="">
    
    <p>町名</p>
    <input type="text" name="addr2" class="addr2" value="">
    
    <p>番地</p>
    <input type="text" name="addr3" class="addr3" value="">
    
    <p>マンション名・部屋番号</p>
    <input type="text" name="addr4" class="addr4" value="">
</form>

ajaxzip3のスクリプトを作成する

ライブラリの読み込み、フォームの作成が完了しましたら、スクリプトを作成します。

本記事では、ボタンをクリックしてajaxzip3で住所を取得します。クリックイベントの監視にはjQueryを使用します。もちろんJavaScriptを使用していただいても構いません。お好みの方法で実装してください。

$('.ajaxzip3').on('click', function(){
    AjaxZip3.zip2addr('zip','','pref','addr1','addr2', 'addr3');

    //成功時に実行する処理
    AjaxZip3.onSuccess = function() {
        $('.addr3').focus();
    };
    
    //失敗時に実行する処理
    AjaxZip3.onFailure = function() {
        alert('郵便番号に該当する住所が見つかりません');
    };
    
    return false;
});

以上でスクリプトの作成は完了です。

ajaxzip3ｂには、成功時、失敗時にそれぞれコールバックメソッドが用意されています。「onSuccess 」が成功時、「onFailure 」が失敗時に実行される処理になります。成功時にはフォーカスを設定し、失敗時にはアラートが表示されるようにしています。こちらは適宜カスタマイズしてご使用ください。