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

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を下記のようにします。

■郵便番号部分のhtml

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

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

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

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

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

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

Fundemicの最新情報をチェック!
>Fundemicの最新情報

Fundemicの最新情報

FundemicのFacebookページでは、
制作実績とTECHブログの最新情報を掲載しております。

CTR IMG