【js】2行で実装!問い合わせフォームで重宝する郵便番号から住所を自動入力

公開日: : javascript

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

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

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

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

■html


次に、フォーム部分に少し手を入れます。

■html


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

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

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

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

google ad

関連記事

記事はありませんでした

google ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

PAGE TOP ↑