WEBサイトのお問い合わせフォームを入力している際、郵便番号を入力した後、自動で住所が入力されるサイトをよく見かけますよね。お問い合わせフォームを入力する際、住所を入力するのって意外と手間がかかる項目だと思います。

今回は郵便番号を入力した後、郵便番号から住所自動入力を実装する方法を解説したいと思います。

ajaxzip3を読み込む

郵便番号から自動で住所を入力するにはajaxzip3を利用します。ajaxzip3の他にもいくつか同じようなプラグインはありますが、ajaxzip3ひとつ覚えておけば大丈夫だと思います。ajaxzip3はダウンロード版とURL版のふたつがあります。

ダウンロード版を読み込む

以下URLよりajaxzip3をダウンロードすることが出来ます。

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

ダウンロードしたajaxzip3をサーバーにアップロードし、以下のように読み込みます。

<script type="text/javascript" src="js/ajaxzip3.js"></script>

URL版を読み込む

jsファイルをダウンロードしなくても以下URLを読み込むだけでも大丈夫です。

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

どちらかの方法でajaxzip3の読み込みが完了したら続いて処理を記述していきます。

ajaxzip3の処理を記述する

郵便番号と住所のフィールドの組み合わせは様々ありますのでそれぞれのパターンごとにコードを記載していきたいと思います。

「郵便番号（7桁）」+「住所」

郵便番号（7桁）を一つの入力フィールドに入力し、住所も一つの入力フィールドで表示する場合のコードです。

<!-- ***** 郵便番号（7桁）***** -->
<input type="text" name="zip1" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr1','addr1');">
<!-- ***** 住所 ***** -->
<input type="text" name="addr1">

「郵便番号 （7桁） 」+「都道府県+それ以降の住所」

郵便番号（7桁）を一つの入力フィールドに入力し、住所欄は都道府県とそれ以降の住所の二つの入力フィールドで表示する場合のコードです。

<!-- ***** 郵便番号（7桁）***** -->
<input type="text" name="zip1" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','pref1','addr1');">
<!-- ***** 都道府県 ***** -->
<input type="text" name="pref1">
<!-- ***** 都道府県以降の住所 ***** -->
<input type="text" name="addr1">

「郵便番号（3桁+4桁）」+「住所」

郵便番号を3桁と4桁の二つの入力フィールドに分けて入力し、住所欄は一つの入力フィールドで表示する場合のコードです。

<!-- ***** 郵便番号（3桁+4桁） ***** -->
<input type="text" name="zip1" maxlength="3"> － <input type="text" name="zip2" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip1','zip2','addr1','addr1');">
<!-- ***** 住所 ***** -->
<input type="text" name="addr1">

「郵便番号（3桁+4桁）」+「都道府県+それ以降の住所」

郵便番号を3桁と4桁の二つの入力フィールドに分けて入力し、 住所欄は都道府県とそれ以降の住所の二つの入力フィールドで表示する場合のコードです。

<!-- ***** 郵便番号（3桁+4桁） ***** -->
<input type="text" name="zip1" maxlength="3"> － <input type="text" name="zip2" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip1','zip2','pref1','addr1','addr1');">
<!-- ***** 都道府県 ***** -->
<input type="text" name="pref1">
<!-- ***** 都道府県以降の住所 ***** -->
<input type="text" name="addr1">

このようにajaxzip3は様々なパターンの入力形式に対応させることが出来ます。