【js】フォームの郵便番号から住所を自動入力2行で実装！

javascript

2021/9/7追記
CDNのリンク先がエラーになっていて正しく実装されない状態でしたので、最新の状態に修正しました。

クライアントワークで問い合わせフォームを作る時、クライアントからサラっと、「郵便番号を入力したら、住所欄が自動で入力されるようにして下さい」と言われる事があります。

そんな簡単に言われても、作るのは大変なんだよ！…なんて思ったりしますが、実はコレ、意外に簡単に実装できちゃうんですね。知っているのと知っていないのでは大違い。知っているって大事。

それでは早速、「2行で実装。郵便番号を入力したら、住所を自動入力する方法」をご紹介していきましょう。

CDNで読み込み

まずはhtmlファイルのheadタグ内などで下記のようにjavascriptを読み込みます。ちなみに外部からjavascriptを読み込んでいるので、自前でjsファイルを用意したり、どこかのサイトからダウンロードする必要はありません。まぁ便利。

■html

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

このようなフォームがあったとして、郵便番号部分のhtmlを下記のようにします。

<input name="郵便番号" type="text" onKeyUp="AjaxZip3.zip2addr('郵便番号','','住所','住所');" />

「onKeyUp=”AjaxZip3.zip2addr(‘郵便番号’,”,’住所’,’住所’);”」の部分を、郵便番号の入力部分に該当するinputタグに追加します。

ちなみに「郵便番号」「住所」の所には…

・郵便番号 → 郵便番号の入力フォームのname属性の文字列
・住所 → 住所のフォームのname属性の文字列

…を入れるのですが、郵便番号の入力フォームが分かれている場合、住所のフォームが都道府県と市町村で分かれる場合など、その時々の状況に応じて変わります。
詳しくはサンプルページにまとめました。

いかがでしょうか。最近は手軽に使えて便利なモジュールがたくさんあります。もちろん、私が知らないものもまだまだたくさんありますので、発見の都度ご紹介していければと思います。ご拝読ありがとうございました。

記事の感想・不明点・リクエストやWEBサイト制作の困りごとなど、お気軽にお寄せ下さい。