WordPress備忘録　Contact Form7でajaxzip3を使って住所を自動入力　ついでに複数住所入力

以前、ajaxzip2を使ってContact Form7で郵便番号から住所を自動入力する方法を書き留めましたが、ajaxzip3を使った方がはるかに楽なので、書き留めておきやす。

Contact Form7の方は、ajaxzip2を使う時と何も変わりません。
ajaxzip3を使用した場合は、以下をhead部分に書き込むだけでOKと、かなり楽ちんです。(^^)

<script type='text/javascript' src='http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js'></script>
<script type="text/javascript">
jQuery(function(){
  jQuery('#zip').keyup(function(event){
    AjaxZip3.zip2addr(this,'','pref','addr1','addr2');
  })
})
</script>

最初に以下の部分でライブラリファイルを読み込み、

<script type='text/javascript' src='http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js'></script>

上記のGoogle Codeが閉鎖されて、githubに移動してライブラリファイルの読み込みアドレスが以下に変更になっています。　2016年6月21日追記

<script src="http://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

その下の部分が郵便番号から住所を自動入力するイベント部分です。

<script type="text/javascript">
jQuery(function(){
  jQuery('#zip').keyup(function(event){
    AjaxZip3.zip2addr(this,'','pref','addr1','addr2');
  })
})
</script>

注目するのは、以下の部分です。

jQuery('#zip').keyup(function(event){ // IDがzipという要素でキーアップイベントの時
    AjaxZip3.zip2addr(this,'','pref','addr1','addr2'); // AjaxZip3で その要素の内容を元にして、pref、addr1、addr2に入力
})

上の例では、前回のadjaxzip2で使用した項目をそのまま使って、pref、addr1、addr2に入力されるようにしていますが、項目が少なければ、ここを減らせばいいし、多ければ、増やすって感じです。(^^)

ここで、例えば、資料請求フォームなどで、資料請求者の住所とお届け先と、１つのフォーム内に２つの住所入力がある場合はどうするんだろう？と、僕のようにjQueryが、全く分からない人間は、思ってしまうわけです。分かる人からすれば、何をアホな事をって内容だとは思いますが、分からんって事はそんなもんです。(^^;

きっと、スマートな書き方があるとは思うんですが、単純にイベントを以下のようにもう一つ、書き足したら、動作したので、書き留めておきやす。(^^;

<script type='text/javascript' src='http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js'></script>
<script type="text/javascript">
jQuery(function(){
  jQuery('#zip').keyup(function(event){
    AjaxZip3.zip2addr(this,'','pref','addr1','addr2');
  })
})
</script>
<script type="text/javascript">
jQuery(function(){
  jQuery('#zip2').keyup(function(event){
    AjaxZip3.zip2addr(this,'','pref2','addr12','addr22');
  })
})
</script>

たぶん、かなり、ダサイ書き方なんだろうけど、まっ、動作するんで、僕のような素人は、これでＯＫなのだ。(笑)

Share on Tumblr

Pocket