郵便番号から住所自動入力の商用版サイトです。
By ピエールソフト 2012.5.23
htmlに1行追加で 住所入力を自動化 できます。

住所自動入力の仕掛け

■まずは動作の確認です。
 →郵番欄に 1010021 と入力してみよう。

住所自動入力のデモ

郵便番号
住所

[動作手順のポイント]
■事前準備
 →<head>~</head>に次の1行を追加。

<script src="https://zipaddr.github.io/zipaddrx.js" charset="UTF-8"></script>
(どのようなhtmlでも適用可能でしょう)

 ※EC-CUBE、Wordpressは、Pluginを!


■動作手順
0)最初にzipaddrx.jsが読み込まれる。
 →この時に動作環境を設定する。
 →これで郵番欄のコントロールが可能。

1)郵番の入力文字数が7桁になるのを待つ。
 →郵番の区切り文字 '-' はカウントしない。
 ※htmlに最大6箇所の入力欄が設置できる。

2)郵番が7桁になるとサーバへ検索依頼。
 →依頼先は考え方によって3通りあります。
 (郵番簿が自社内、有償版、商用版)
 →1箇所管理で利用するのが当方の考え。
 →クロスドメイン通信で何処でも利用可。
 →データは圧縮・復元でネット負荷低減。

3)検索結果(jsonp)による処理
 →0件の場合はアンマッチ画面を出力。
 →1件の場合は情報をセットして、5)へ

4)結果が2件以上はガイダンス画面生成。
 →対象行をクリックで選択が確定し5)へ
 ※番号が同じで住所が違っても対応可能。
 (特殊ケースの例:438-0078)

5)html内の各欄にデータを埋め込む。
 →id名を合わせるのはこの為。
 →都道府県~欄なしはキャリーオーバー。


6)Ver7.60以降は番地まで自動入力が可能。
 →郵番欄に「m」又は「+」と入力する。
 →位置情報の利用を許可する。
 →MAPから位置をclickして場所を確定。
 →以降は通常と同じです。

▲ページの先頭へ