EC-CUBEの郵便番号→住所検索機能は、動作させるにはいったん郵便番号DBをアップロードする必要があります。このDBのアップロードは容量が大きいため、アップロードの途中でエラーが頻発したりタイムアウトしたりでなかなか大変です。
そこでAjaxで郵便番号検索が実行できるAjaxZip3を使うことにしました。
ヘッダーでajazzip3.jsをロードします。
1 |
<script src="https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script> |
「住所検索」ボタンからonclickを省き、代わりにクラスを付けます。
1 |
<a href="#" class="addresinput"><img src="<!--{$TPL_URLPATH}-->img/button/btn_address_input.jpg" alt="住所自動入力" /></a> |
都道府県・市町村が入るテキストボックスは郵便番号の次のセル(tr)になるので、郵便番号の親であるtrの次のtrの中にあるinput要素を探して、そのinput要素に都道府県、市町村が入るようにします。カスタムしている場合は適宜調整が必要です。
また、AjaxZip3はname属性で入力フィールドを判断している点は注意が必要だと思います(IDではありません)。
都道府県はselect要素になりますが、AjaxZip3.zip2addrの第3引数にselectのnameを渡せば都道府県も選択してくれます。
1 2 3 4 5 6 7 8 9 10 11 |
//住所 $('.addresinput').on('click',function(){ var zip1 = $(this).closest('td').find('input:eq(0)').attr('name'); var zip2 = $(this).closest('td').find('input:eq(1)').attr('name'); var ad = $(this).closest('tr').next('tr').find('input:eq(0)').attr('name'); var pref = $(this).closest('tr').next('tr').find('select:eq(0)').attr('name'); AjaxZip3.zip2addr(zip1,zip2,pref,ad,ad); return false; }); |
ADs
コメントはまだありません。