cakephperの日記(CakePHP, Laravel, PHP) Twitter


継続的WebセキュリティテストサービスVAddyを始めました!

2010-02-16

郵便番号から住所を自動で補完する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;
}

ショウショウ 2014/11/18 19:53 すみません、2箇所修正するっておっしゃってったんですが、どうやって修正すればいいんですか。

ありがとうございます。

トラックバック - http://d.hatena.ne.jp/cakephper/20100216/1266293151