郵便番号から住所を自動で補完するajaxzip2をID対応させた
いつも郵便番号から住所を自動で補完するajaxzip2を利用させてもらってます。便利で助かる。
このツール、name属性を使うことが前提となっているので、Cakephpで利用しようとすると、nameがdata[Model][zip]みたいになって、モデル単位でnameの値が変わってしまうので、ちょっと使いにくい。ということで、ID属性で使えるようにちょっとだけ修正した。
CakeのViewファイルは、formヘルパーで下記のように、各inputフォームにidを指定します。あとは、Javascript読み込んで、下記のようなボタンを郵便番号入力欄の横に付けておく
<script src="/js/postcode/prototype.js"></script> <script src="/js/postcode/ajaxzip2.js" charset="UTF-8"></script> 郵便番号<?php echo $form->input('zip' , array('id' => 'zipcode')); ?> <input type="button" onclick="AjaxZip2.zip2addr('zipcode','address1pref','address2');" value="住所自動登録" id="postalBtn" /> 都道府県<?php echo $form->input('address1', array('id' => 'address1pref')); ?> 住所<?php echo $form->input('address2', array('id' => 'address2')); ?>
そして、ajaxzip2.jsの最後にあるAjaxZip2.getElementByNameの関数を下記のように変更。(名前がByNameなのに、中でByIdしてるのがちょっとなとは思う。。。)
コメントが付いてるところが自分の修正箇所。2箇所だけです。
// フォームnameから要素を取り出す AjaxZip2.getElementByName = function ( elem, sibling ) { if ( typeof(elem) == 'string' ) { /*var list = document.getElementsByName(elem); */ var list = document.getElementById(elem); //change ichikawa if ( ! list ) return null; return list; // add ichikawa if ( list.length > 1 && sibling && sibling.form ) { var form = sibling.form.elements; for( var i=0; i<form.length; i++ ) { if ( form[i].name == elem ) { return form[i]; } } } else { return list[0]; } } return elem; }