WEBサイトにお問い合わせフォームなどのフォームを設置することは多いと思います。
例えば、住所を入力してもらいたいときに、郵便番号と住所のフォームを設置したとします。ユーザーとしては、郵便番号を入れて、住所を入れて、と結構面倒に感じると思います。郵便番号を入力したら、住所も自動入力されると素敵ですよね。
とある方から、自身のWEBサイトに設置している注文フォームにこのようなフォームを設置したいと相談されました。ネットで色々と調べてみたところ、色んな方が自動入力のフォームを実装するためのソースを公開しているんですね。
ありがたや～と執筆者様の方向におじぎをしながら拝見していたところ、その中でも比較的実装が簡単な方法を見つけたので、シェアさせていただきたいと思います。
jQuery.zip2addrのダウンロード
まずは自動入力フォームを実装するためのJavascript「jQuery.zip2addr」をダウンロードします。jQuery.zip2addrは、kotarokさんがgithubで公開しています。kotarokさんにこの場を借りてお礼申し上げます。
jQuery.zip2addr-master.zipというZIPでまとめてあるファイルがあるのでそちらをダウンロードしてください。
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’);”」を追加することで、住所の自動入力フォームの出来上がりです。
上記のフォームはシンプルなフォームですが、都道府県が別フィールドになっていたり郵便番号のフィールドが分れていたりと、もっと複雑なフォームにも対応できます。
あとがき
実装も簡単で、こんなに便利な機能を追加できるというのは素晴らしいですね。住所の入力フォームを実装されている方は、ぜひ参考にしてみてはいかがでしょう。
ちなみにWordPressのContact Form 7を使っていても実装可能でした。