どもです。
フォームメールを設置するとき、郵便番号や住所を入力する欄があることがあります。
郵便番号を入力したら自動的に住所が表示されると親切で良いですね。
というわけで、その方法です。
使用するjsは「jquery.jpostal.js」というものです。
<script src="/js/jquery-1.11.1.min.js"></script>
<script src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>
head内でjQueryと一緒に読み込みます。
<script>
$(window).ready( function() {
$('#yuubin').jpostal({
click : '#yuubinButton',
postcode : [
'#yuubin'
],
address : {
'#address01' : '%3',
'#address02' : '%4%5'
}
});
});
</script>
そして、こんな感じの記述をします。
意味は以下の通り。
<script>
$(window).ready( function() {
$('郵便番号のテキストボックス').jpostal({
click : '検索ボタン',
postcode : [
'郵便番号のテキストボックス'
],
address : {
'都道府県を表示するテキストボックス' : '%3',
'市区郡を表示するテキストボックス' : '%4',
'町域を表示するテキストボックス' : '%5',
'大口事務所の番地を表示するテキストボックス' : '%6',
'大口事務所の名称を表示するテキストボックス' : '%7',
'都道府県（半角フリガナ）を表示するテキストボックス' : '%8',
'市区郡（半角フリガナ）を表示するテキストボックス' : '%9',
'町域（半角フリガナ）を表示するテキストボックス' : '%10'
}
});
});
</script>
必要なもののみを記述し、繋げて表示する場合は「%4%5」というように、こちらの記述も繋げて書けばおｋ。
「click」の行を無くすと、ボタンなしで逐次反映。
一手間省けるのは確かですが、個人的にはボタン有りの方が分かりやすくて親切なんじゃないかなーと思います。
「000」-「0000」みたいな感じで郵便番号の入力欄が2つあるなら、
postcode : [
'郵便番号のテキストボックス'
],
この部分を、
postcode : [
'郵便番号のテキストボックス1',
'郵便番号のテキストボックス2'
],
と変更するだけ。
超簡単。
3行目の郵便番号のテキストボックスについては、最初の1つを書いておけば良いようです。
世の中には便利なものが出回ってますね。
基本的な設置方法について書きましたが、もっと詳しく知りたい場合は配布元のサイトを見てみると良いと思います。
Googleのサイトですが、解説は日本語で結構丁寧です。
配布元サイトはこちら