郵便番号を入れたら自動で住所が入力されるようにしたいんだけどどうやったら出来るんだろう
本日は
【コピペでOK】郵便番号を入力したら自動で住所が入力されるJSのライブラリをご紹介
というテーマで記事を書いていきます。
フォームなどで必ずと言ってもいいくらい必要なこの仕様。
Ajaxzip3というJavaScriptのライブラリを使えば簡単に実装出来ちゃいます。
それでは早速見ていきましょう。
この記事を書いている人
成果物
ますはじめに以下に成果物を掲載いたします。
See the Pen poRjGzR by shino (@rytym0720) on CodePen.
実装方法①以下のコードを<head>内に記載します。
<script type="text/javascript" src="https://ajaxzip3.github.io/ajaxzip3.js" charset="utf-8"></script>
実装方法②HTMLに入力フォームを記載
<form action="./" method="post">
〒 <input type="text" name="zip1"> - <input type="text" name="zip2" onKeyUp="AjaxZip3.zip2addr('zip1','zip2','address1','address2');">
都道府県
<select name="address1">
<option value="">-- 選択してください --</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</select>
市区町村番地など <input type="text" name="address2" size="60">
</form>
これをコピペするだけで郵便番号を入力したら住所が自動入力されるようになります。
CSS文字通り飾りのような形ですので、ご自身のサイトに合わせて適切なCSSをかけてあげてもらえればと思います。
実装自体はscriptとなるファイルを呼び出してHTMLに入力フォームをHTMLで作ればOKです。
非常に簡単に実装出来て感動ですよね。笑
以前のAjaxzip2はもうちょっとステップを踏む必要がありややこしかったんですが、Ajaxzip3になってコピペで実装出来る様になりました。
よかったら皆さんも使ってみて下さい。
それでは本日はここまで。
また明日の記事でお会いしましょう✨
おしまい✨