京都のシステム開発・ホームページ制作会社　株式会社Nextat（ネクスタット）

こんばんは、株式会社Nextatのナカエです。

Ajaxという単語が世に溢れてから、
郵便番号から住所を自動入力させるのももはや当たり前の機能となっています。

この機能をWordPressのContact Form7に付け加える案件があったので、方法をメモしておきます。


今回はajaxzip3　を利用させて頂きました。


ajaxzip3はソースコードをたった数行加えるだけで

<script src="https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js" charset="UTF-8"></script>

<input type="text" name="zip11" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');">
<input type="text" name="addr11" size="60">

サンプル　のように住所の自動入力機能を付け加えることができます。

Contact Form 7のショートコードでフォームを生成する都合上、onKeyUp属性の指定ではなくjQueryのon()を使ってイベントを登録してやりました。

<script src="https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js" charset="UTF-8"></script>
<script type="text/javascript">
$(function(){
  $('#zip11').on('keyup', '', function(){
    AjaxZip3.zip2addr(this,'','addr11','addr11');
  });
});
<p>郵便番号　[text zip11 id:zip11]</p>
<p>ご住所　[text addr11]</p>

まったく先人は偉大ですね。