フォーム入力の際に、郵便番号を入力すると自動的に都道府県・市区町村を入力してくれるスクリプト。
AjaxZip2は、昨年公開した 『ajaxな住所入力フォーム』 の新バージョンです。 郵便番号を入力すると、該当する都道府県名・住所が 自動的に入力されます。 Ajaxと JSON フォーマットを利用する JavaScriptライブラリとして公開しました。 JavaScript のみで稼動するため、 サーバサイドで稼動するCGIプログラムは不要です。 郵便番号→住所変換処理は 全てクライアントサイドのJavaScriptで行います。 既存 HTML の住所入力フォームを たった3行書き換えるだけで利用できます。 簡単に設置できるため、プログラムに詳しくない方でも 導入していただけると思います。 住所入力フォームHTMLを書き換える場合は、変更箇所は3行のみです。 まず、<head>~</head>中に以下の2行を追加してください。<script src="ajaxzip2/prototype.js"></script> <script src="ajaxzip2/ajaxzip2.js" charset="UTF-8"></script>ページ内で既に prototype.js または jquery.js の いずれかを利用している場合、 追加するのは ajaxzip2.js の1行のみでOKです。 なお、ajaxzip2.js の文字コードは UTF-8 ですが、 呼び出し元のフォームのある HTML ファイルの文字コードは Shift_JIS でも EUC-JP でも構いません。 次に、住所入力フォームの7桁郵便番号入力欄に onKeyUp イベントハンドラを登録します。<input type="text" name="zip"> ↓ <input type="text" name="zip" onKeyUp="AjaxZip2.zip2addr(this,'pref','addr',null,'addr');">第2引数 'pref' には、 都道府県名選択のプルダウン(またはテキスト入力欄も可)の フォーム変数名を指定します。 同様に、第3引数 'addr' に 市区町村名以下の住所入力欄のフォーム変数名を指定します。 ご利用のフォームに合わせて、変更しておいてください。
Tags:Form
Comment Form
このアイテムは閲覧専用です。コメントの投稿、投票はできません。
The Recent Items Of The Same Category
- 2009.12.21(Mon)NP_BlogMenu
- カスタマイズ。 ・cate...
- 2009.12.20(Sun)if文の拡張
- Nucleusのif文を拡張...
- 2009.12.19(Sat)NP_ContentsList
- カスタマイズ。 ・cate...
- 2009.12.18(Fri)Navigation Tree<%Dtree()%>
- カスタマイズ。 ・ライ...
- 2009.12.17(Thu)Nucleus Install Plugin
- Nucleusにインストール...
- 2009.12.17(Thu)jsで表示遅延解消
- BlogPeople 等のリンク...
- 2009.12.17(Thu)IE6でmin-height
- min-heightがIE6での実...
- 2009.12.13(Sun)ajaxな住所入力フォーム
- フォーム入力の際に、郵...
- 2009.12.13(Sun)フリガナ自動変換スクリプト
- フォーム入力の際に、名...
- 2009.12.12(Sat)Simplified Box Model Hack
- Simplified Box Model H...
The List Of All Tags