webデザイナの学習・Tipsなど

本・ツール・webサービス等のレビュー

リンク集

スペシャルコンテンツ

REDLINEって何?

AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム(CGI不要版)

Kawa.net xp AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム(CGI不要版)

デモを試してみて激しく便利だったので試してみる。設置方法の詳細は上記サイトを参照。

デモ・・・こんな感じ。

郵便番号
都道府県
市区町村~

Ajaxっていろんなギミックが楽しかったりするけど、こういう面倒な入力作業を補助する使い方って今あるサイトの既存フォームにもすぐに使えるからいいなぁ、と。

当然Javascriptが無効だと使えないけど、その場合でも単純に普通の自分で全部入力するタイプのフォームになるだけだから、特に問題なし。この場合はnoscriptを入れる必要もない気がする。

一応今回のソース・・・


<script src="ajaxzip2/prototype.js" type="text/javascript"></script>
<script src="ajaxzip2/ajaxzip2.js" type="text/javascript" charset="utf-8"></script>

<form method="post" action="http://~"> <dl> <dt>郵便番号</dt> <dd><input type="text" name="zip" size="10" maxlength="8" onkeyup="AjaxZip2.zip2addr(this,'pref','addr');" /></dd> <dt>都道府県</dt> <dd><select name="pref"> <option value="">都道府県</option> <option value="北海道">北海道</option> <option value="青森県">青森県</option> <option value="秋田県">秋田県</option> <option value="岩手県">岩手県</option> <option value="宮城県">宮城県</option> <option value="山形県">山形県</option> <option value="福島県">福島県</option> <option value="新潟県">新潟県</option> <option value="茨城県">茨城県</option> <option value="栃木県">栃木県</option> <option value="群馬県">群馬県</option> <option value="埼玉県">埼玉県</option> <option value="千葉県">千葉県</option> <option value="東京都">東京都</option> <option value="神奈川県">神奈川県</option> <option value="山梨県">山梨県</option> <option value="長野県">長野県</option> <option value="富山県">富山県</option> <option value="石川県">石川県</option> <option value="福井県">福井県</option> <option value="岐阜県">岐阜県</option> <option value="静岡県">静岡県</option> <option value="愛知県">愛知県</option> <option value="三重県">三重県</option> <option value="滋賀県">滋賀県</option> <option value="京都府">京都府</option> <option value="大阪府">大阪府</option> <option value="兵庫県">兵庫県</option> <option value="奈良県">奈良県</option> <option value="和歌山県">和歌山県</option> <option value="鳥取県">鳥取県</option> <option value="島根県">島根県</option> <option value="岡山県">岡山県</option> <option value="広島県">広島県</option> <option value="山口県">山口県</option> <option value="徳島県">徳島県</option> <option value="香川県">香川県</option> <option value="愛媛県">愛媛県</option> <option value="高知県">高知県</option> <option value="福岡県">福岡県</option> <option value="佐賀県">佐賀県</option> <option value="長崎県">長崎県</option> <option value="熊本県">熊本県</option> <option value="大分県">大分県</option> <option value="宮崎県">宮崎県</option> <option value="鹿児島県">鹿児島県</option> <option value="沖縄県">沖縄県</option> </select></dd> <dt>市区町村~</dt> <dd><input type="text" name="addr" size="60" /></dd> </dl> </form>

とりあえずファイル類をダウンロードして、サーバーにアップして、今フォーム使ってるページのheadにjsファイルへのリンクを追加。あとは郵便番号部分のinputにonkeyupを追加してやるだけ、とシンプル。。