癒しのアロマ&音楽リラックス > 日記>日記 > 郵便番号を入力すると住所が自動的にフォームに入力される簡単Ajax「ajaxzip3」(javascriptだからCGI・PHP不要)
2013年03月11日
問い合わせフォームなどの小技として、とっても便利で簡単に郵便番号を入れると住所が自動的に入るようにできます!
少し前までは、郵便番号データを自前サーバに置く必要があったり大変でしたが、このjavascriptプログラムはサポートチームがデータを更新してくれるという手間いらずなところもイイです。

1-1)HTMLヘッダ設定例(設置するHTMLのcharsetがUTF-8の場合)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
</head>

1-2)HTMLヘッダ設定例(設置するHTMLのcharsetがShift_JISの場合)=昔のS-JISサイトもOK!
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
</head>

※httpsの場合は、”src=”以降のURLを”https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js”にします。


フォームの例は以下の通りです。簡単に設置できますよ。
例えば「onKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01');"」の()の中は、
ボックスの”name=”のパラメータに合わせるだけで、OKです。

2-1)1ボックスで郵便番号7桁を入力させる場合の設定例(都道府県と以降の住所を分ける場合)
<input type="text" name="zip01" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01');">
<input type="text" name="pref01" size="20">
<input type="text" name="addr01" size="60">

2-2)1ボックスで郵便番号7桁を入力させる場合の設定例(都道府県と以降の住所を分けない場合)
<input type="text" name="zip11" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');">
<input type="text" name="addr11" size="60">

2-3)2ボックスで郵便番号を3桁-4桁形式で入力させる場合の設定例
<input type="text" name="zip21" size="4" maxlength="3"> − <input type="text" name="zip22" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip21','zip22','pref21','addr21','strt21');">
<input type="text" name="pref21" size="40">
<input type="text" name="addr21" size="40">
<input type="text" name="strt21" size="40">

posted by shige at 18:02 | Comment(1) | TrackBack(0) | 日記>日記
この記事へのコメント
すごい(^0^) ありがとうございます!!
Posted by eriko at 2014年11月24日 23:54
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。