Javascript:「ajaxzip3」で郵便番号から住所を自動入力

お問い合わせフォームなどで郵便番号を入力すると自動住所が入力されるフォームがあります。

郵便番号検索ができる「ajaxzip3」を使用すると簡単に設置することが可能です。
ユーザビリティの向上にもなると思うし、とても使いやすいです。

下記に「ajaxzip3」を設置した時の方法をメモします。

ajaxzip3


「ajaxzip3」の使用方法

今回、都道府県をセレクトボックスを使用して設置してます。

Javascript

下記のJSファイルを読み込みます。

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js"></script>

httpsの場合は下記を記述します。

<script src="https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js"></script>

PHP

<?php
// 都道府県
function get_pref() {
    return array(
        1 => '北海道',
        2 => '青森県',
        3 => '岩手県',
        4 => '宮城県',
        5 => '秋田県',
        6 => '山形県',
        7 => '福島県',
        8 => '茨城県',
        9 => '栃木県',
        10 => '群馬県',
        11 => '埼玉県',
        12 => '千葉県',
        13 => '東京都',
        14 => '神奈川県',
        15 => '新潟県',
        16 => '富山県',
        17 => '石川県',
        18 => '福井県',
        19 => '山梨県',
        20 => '長野県',
        21 => '岐阜県',
        22 => '静岡県',
        23 => '愛知県',
        24 => '三重県',
        25 => '滋賀県',
        26 => '京都府',
        27 => '大阪府',
        28 => '兵庫県',
        29 => '奈良県',
        30 => '和歌山県',
        31 => '鳥取県',
        32 => '島根県',
        33 => '岡山県',
        34 => '広島県',
        35 => '山口県',
        36 => '徳島県',
        37 => '香川県',
        38 => '愛媛県',
        39 => '高知県',
        40 => '福岡県',
        41 => '佐賀県',
        42 => '長崎県',
        43 => '熊本県',
        44 => '大分県',
        45 => '宮崎県',
        46 => '鹿児島県',
        47 => '沖縄県'
    );
}
?>

HTML

郵便番号を2つのテキストボックスに分けています。
郵便番号のテキストボックスは1つでも可能です。

<input type="text" name="zip1" value="" maxlength="3" /> - 
<input type="text" name="zip2" value="" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip1','zip2','pref','address');" />
<br>
<select name="pref">
    <option value="">選択</option>
    <?php foreach (get_pref() as $key => $value): ?>
    <option value="<?php echo $key; ?>"><?php echo $value; ?></option>
    <?php endforeach; ?>
</select>
<br>
<input type="text" name="address" value="" />

2つ目の郵便番号の入力が終わると自動的に住所が入力されます。