何の因果か、本業の会社ホームページの再構築をやっているのだが、
その中で「お問い合わせフォームで、郵便番号を入力したら自動で住所が入る機能が欲しい」
とか、言われた。
まぁ、お問い合わせフォームとしたらイマドキ当然の機能なんだけど、
実装するとなると、結構メンドい。
なるべく簡単にできんかなーと、言うわけで考えてみた。

まず、利用するのはこれ。
株式会社人気組 – ajaxzip3
本当はYahoo!APIの方で実装したかったんだけど、こちらの方がサンプルが揃ってたし、楽そうだったので採用。
「世界一、簡単に設置できる郵便番号検索を目指して！」と言うだけあって、
なかなか簡単に実装できる。

実際には、スタイルシートとかJavaScriptソースを分けた方がいいんだろうけど、
実験するだけならこのソースを投稿として記述すれば問題なく動く。

<script type='text/javascript' src='https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js'></script>
<form class="form-horizontal">
<legend>実装サンプル</legend>
<fieldset class="control-group">
  <label class="control-label" style="padding-top:13px;" for="zip1">郵便番号</label>
  <div class="controls">
    <input type="text" class="xlarge span1" name="zip1" size="10" maxlength="8" style="width:80px;" onkeyup="AjaxZip3.zip2addr(this,'','addr1','addr1');">
  </div>
</fieldset>
<fieldset class="control-group">
  <label class="control-label" style="padding-top:13px; for="addr1">住所</label>
  <div class="controls">
    <input type="text" class="xlarge span4" name="addr1" style="width:250px;">
  </div>
</fieldset>
</form>

この実装だと、郵便番号入力欄の「onkyup」イベントで郵便番号検索APIの「AjaxZip3.zip2addr」をCALLし、
住所入力欄「addr1」に値をセットさせている。

 
さて、WordPressでお問い合わせと言えば「Contact Form 7」
お問い合わせの内容を柔軟にカスタマイズでき、メールで送信してくれ、自動返信も可能。
今回もこちらを採用しようと思っていたが、ひとつ問題が。
このプラグインは入力欄を独自のタグ（ショートコードみたいな感じ）で作成するが、
JavaScriptのイベントを記述する事ができない。
つまり、上記のAPIを呼び出す事ができない。
ではどうするかと言えば、jQueryでイベントをハンドリングしてやる。

 
まず、Contact Form 7の設定画面でお問い合わせフォームを作成

郵便番号 [text* zip id:zip 10/ watermark]
住所 [text* addr id:addr 10/]

これで出来上がったお問い合わせフォームのコードがこちら。

[contact-form-7 id="**" title="コンタクトフォーム 1"]

で、通常であれば作成したフォームのコードを投稿画面に記述するのだが、
その際、一緒にjQueryのイベントハンドラも一緒に記述する。
こちらもまじめにやるなら、JavaScript部分は別ソースにしてあげた方がいいけど、
今回は実験なので、そのまま投稿画面に記述。

<script type='text/javascript' src='https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js'></script>
<script type="text/javascript">
jQuery(function(){
  jQuery('#zip').keyup(function(event){
    AjaxZip3.zip2addr(this,'','addr','addr');
  })
})
</script>
[contact-form-7 id="**" title="コンタクトフォーム 1"]

上のサンプルでは郵便番号検索欄の「onkyup」イベントに記述していた内容を、
「jQuery(‘#zip’).keyup」で実装している。

こちらはサンプル載せないけど、動きとしては上と同じ。
その内、プラグイン化してみようかな。

Tweet