あぼかどブログ > Web > HTML > 郵便番号の入力で住所を自動表示する:Ajaxzip3メモ

郵便番号の入力で住所を自動表示する:Ajaxzip3メモ

htmlのフォームで郵便番号を入力すると、都道府県・市区町村など
住所を自動で表示してくれる便利なAPI「Ajaxzip3」。
以下、使用方法のメモ。

ajaxzip3の使い方

◆headタグに以下を入れる。
<script type="text/JavaScript" src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>

※SSLの場合はこっち↓
<script type="text/JavaScript" src="https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js" charset="UTF-8"></script>

◆郵便番号のinputタグにonKeyUp属性を入れる。
onKeyUp="AjaxZip3.zip2addr(this,'','都道府県','市区町村');

◆自動表示させるinputタグのname属性に都道府県、市区町村を指定する。

ajaxzip3使用のhtml(例)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajaxzip3テスト</title>
<script type="text/JavaScript" src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
</head>
<body>
<table border="1">
<tr>
  <th colspan="2">都道府県と市区町村を別々で表示する場合</th>
</tr>
<tr>
  <td style="width:120px">郵便番号</td>
  <td style="width:280px"><input type="text" class="text" name="object_post_number" value="" onkeyup="AjaxZip3.zip2addr(this,'','prefecture','city');" /></td>
</tr>
<tr>
  <td>都道府県</td>
  <td><input type="text" class="text" name="prefecture" value="" style="width:90%" /></td>
</tr>
<tr>
  <td>市区町村</td>
  <td><input type="text" class="text" name="city" value="" style="width:90%" /></td>
</tr>
</table>
<br />
<table border="1">
<tr>
  <th colspan="2">都道府県と市区町村を一緒に表示する場合</th>
</tr>
<tr>
  <td style="width:120px">郵便番号</td>
  <td style="width:280px"><input type="text" name="delivery_post_number" value="" onkeyup="AjaxZip3.zip2addr(this,'','prefecture_city','prefecture_city');" /></td>
</tr>
<tr>
  <td>都道府県市区町村</td>
  <td><input type="text" name="prefecture_city" value="" style="width:90%" /></td>
</tr>
</table>
</body>
</html>

出力イメージ

ajaxzip使用の出力イメージ

【前後の記事】
«
 
»
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です