郵便番号検索を簡単に設置できるJSライブラリ「ajaxzip3」の設置方法について説明します。
ajaxzip3によって、郵便番号から、自動的に住所を入力することができます。
お問い合わせページ等、住所を入力するフォームに便利なライブラリです。
郵便番号と住所の表示形式によって、HTMLの記述が変わってくるので、
それぞれの設置形式の例を記載しました。
郵便番号を入力して動作を確認することができます。
設置例1
1ボックスで郵便番号7桁を入力させる場合の設定例
（都道府県と以降の住所を分ける場合、郵便番号入力時に住所自動入力）
郵便番号：
都道府県：
住所：
| 1 2 3 4 | <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script> 郵便番号：<input type="text" name="zip01" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,”,’pref01′,’addr01′);"> 都道府県：<input type="text" name="pref01"> 住所：<input type="text" name="addr01"> |
設置例2
1ボックスで郵便番号7桁を入力させる場合の設定例
（都道府県と以降の住所を分けない場合、郵便番号入力時に住所自動入力）
郵便番号：
住所：
| 1 2 3 | <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script> 郵便番号：<input type="text" name="zip11" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,”,’addr11′,’addr11′);"> 住所：<input type="text" name="addr11"> |
設置例3
2ボックスで郵便番号を3桁-4桁形式で入力させる場合の設定例
郵便番号： －
都道府県：
住所１：
住所２：
| 1 2 3 4 5 | <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script> 郵便号：<input type="text" name="zip21" maxlength="3"> － <input type="text" name="zip22" maxlength="4" onKeyUp="AjaxZip3.zip2addr(‘zip21′,’zip22′,’pref21′,’addr21′,’strt21’);"> 都道府県：<input type="text" name="pref21"> 住所１：<input type="text" name="addr21"> 住所２：<input type="text" name="strt21"> |
設置例4
設置例1をボタン押下時に住所自動入力するように変更してみましょう。
buttonタグを使って、onClickイベント発生時に処理を記述します。
郵便番号：
都道府県：
住所：
| 1 2 3 4 5 | <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script> 郵便番号：<input type="text" name="zip01" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,”,’pref01′,’addr01′);"> <button onClick="AjaxZip3.zip2addr(‘zip01′,”,’pref01′,’addr01’);">郵便番号から住所入力</button> 都道府県：<input type="text" name="pref01"> 住所：<input type="text" name="addr01"> |
以上でajaxzip3の設置の説明を終わります。
