郵便番号を入れたら住所を自動入力してくれるフォームを実装するjQueryプラグイン「jQuery.zip2addr」

郵便番号を入れたら住所を自動入力してくれるフォームを実装するjQueryプラグイン「jQuery.zip2addr」

郵便番号を入れたら住所を自動入力してくれるフォームを実装するjQueryプラグイン「jQuery.zip2addr」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加

WEBサイトにお問い合わせフォームなどのフォームを設置することは多いと思います。

例えば、住所を入力してもらいたいときに、郵便番号と住所のフォームを設置したとします。ユーザーとしては、郵便番号を入れて、住所を入れて、と結構面倒に感じると思います。郵便番号を入力したら、住所も自動入力されると素敵ですよね。

とある方から、自身のWEBサイトに設置している注文フォームにこのようなフォームを設置したいと相談されました。しかしながら私はJavascriptは苦手です・・・なので、ネットで色々と調べてみたところ、色んな方が自動入力のフォームを実装するためのソースを公開しているんですね。

ありがたや~と執筆者様の方向におじぎをしながら拝見していたところ、その中でも比較的実装が簡単な方法を見つけたので、シェアさせていただきたいと思います。

スポンサードリンク

jQuery.zip2addrのダウンロード

まずは自動入力フォームを実装するためのJavascript「jQuery.zip2addr」をダウンロードします。jQuery.zip2addrは、kotarokさんがgithubで公開しています。kotarokさんにこの場を借りてお礼申し上げます。

jQuery.zip2addr-master.zipというZIPでまとめてあるファイルがあるのでそちらをダウンロードしてください。

》jQuery.zip2addr

jquery.zip2addr.jsのアップロード

jQuery.zip2addr-master.zipには、「README」「jquery.zip2addr.js」「sample.html」の3つのファイルが存在します。

この中から、jquery.zip2addr.jsをサーバーにアップロードしてください。

jQueryとzip2addrの読み込み

<head>に以下のソースを追記して、jQueryとzip2addrをロードします。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.zip2addr.js"></script>

すでにjQueryをロードしている場合は、2行目のzip2addrのロードだけ追記します。ファイルの場所が異なる場合は、srcでパスを指定してください。

フォームの実装

いよいよフォームを実装していきます。実装方法はいたって簡単で、郵便番号フォームのIDを”zip”、住所フォームのIDを”addr”に合わせて実装します。

以下のソースは実装例です。

<p>郵便番号:<input name="zip" type="text" onKeyUp="$('#zip').zip2addr('#addr');" id="zip" maxlength="8"></p>
<p>住所:<input type="text" name="addr" value="" id="addr" /></p>

このようにIDを合わせて、「onKeyUp=”$(‘#zip’).zip2addr(‘#addr’);”」を追加することで、住所の自動入力フォームの出来上がりです。

上記のフォームはシンプルなフォームですが、都道府県が別フィールドになっていたり郵便番号のフィールドが分れていたりと、もっと複雑なフォームにも対応できます。

注意点

zip2addrをjQueryよりも先にロードすると、うまく動きませんでした。zip2addrはjQueryよりも後にロードしないといけないので、私が利用させていただいたときは</body>の直前でロードするように記述しました。

あとがき

実装も簡単で、こんなに便利な機能を追加できるというのは素晴らしいですね。住所の入力フォームを実装されている方は、ぜひ参考にしてみてはいかがでしょう。

ちなみにWordPressのContact Form 7を使っていても実装可能でした。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。