お問い合わせフォームなどで郵便番号を入力すると自動で住所が入力されるフォームがあります。
郵便番号検索ができる「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つ目の郵便番号の入力が終わると自動的に住所が入力されます。
