入力欄とJ-POSTAL書式 @ 青木ITプランニング

入力欄とJ-POSTAL書式

追加スクリプト作成ユーティリティ(jpostal_parent_wizard.html)を使う場合は、通常は読む必要はありません。

ここではいろいろな住所入力フォームを例にあげて、入力欄とJ-POSTAL書式を設定するスクリプトについて説明します。

ケース1. 郵便番号の入力欄が１個の場合(1)
ケース2. 郵便番号の入力欄が１個の場合(2)
ケース3. 都道府県がテキストボックスの場合
ケース4. 都道府県の<option>のvalue属性について
ケース5. 市区町村から番地まで、１つの入力欄の場合
ケース6. 大口事業所の番地、名称を利用する場合

J-POSTALの郵便データ書式を次に示します。

図0. J-POSTALの郵便データ書式

書式	意味	都道府県データの入力内容の例	大口事業所の入力内容の例
%0	郵便番号の上位３桁	100	100
%1	郵便番号の下位４桁	0001	0001
%2	都道府県	東京都	東京都
%3	市区町村	千代田区	千代田区
%4	町域	千代田	千代田
%5	丁目、番地 (大口事業所のみ)		１－１
%6	大口事業所名称 (大口事業所のみ)		宮内庁

ケース1. 郵便番号の入力欄が１個の場合(1)

郵便番号の入力欄が１個で、上３桁と下４桁をハイフンで分ける場合です。

図1-1. 住所入力フォーム

住所入力
郵便番号 [100-0001]
住所１ [東京都]▼
住所２
[千代田区　　　　]
住所３ [千代田　　　　　]
住所４ [　　　　　　　　　]
名　称
[　　　　　　　　　]
【応募】

図1-2. HTMLソース

 1: <html><head>
 2: </head><body>
 3: <form action="../cgi-bin/regist.cgi" method=POST>
 4: 住所入力<br>
 5:
 6: 郵便番号 <input name=postcode><br>
 7:
 8: 住所１
 9: <select name=address1>
10: <option value="" selected>選択してください
11: <option value="北海道">北海道
～中略～
58: </select><br>
59:
60: 住所２ <input name=address2><br>
61: 住所３ <input name=address3><br>
62: 住所４ <input name=address4><br>
63: 名　称 <input name=address5><br>
64:
65: <input type=submit value="応募">
66: </form>
67: </body></html>

図1-3.入力欄とname属性

入力欄	name属性	入力内容	書式
郵便番号	postcode	100-0001	%0-%1
住所１	address1	東京都	%2
住所２	address2	千代田区	%3
住所３	address3	千代田	%4

図1-4. 入力欄のname属性と書式の設定スクリプト

jpp_obj.ELEMENT_FORMAT.postcode  = '%0-%1';

jpp_obj.ELEMENT_FORMAT.address1  = '%2';
jpp_obj.ELEMENT_FORMAT.address2  = '%3';
jpp_obj.ELEMENT_FORMAT.address3  = '%4';

ケース2. 郵便番号の入力欄が１個の場合(2)

郵便番号の入力欄が１個で、7桁連続で入力する場合です。

図2-1. 住所入力フォーム

住所入力
郵便番号 [1000001]
住所１ [東京都]▼
住所２
[千代田区　　　　]
住所３ [千代田　　　　　]
住所４ [　　　　　　　　　]
名　称
[　　　　　　　　　]
【応募】

図2-2. HTMLソース

 1: <html><head>
 2: </head><body>
 3: <form action="../cgi-bin/regist.cgi" method=POST>
 4: 住所入力<br>
 5:
 6: 郵便番号 <input name=postcode><br>
 7:
 8: 住所１
 9: <select name=address1>
10: <option value="" selected>選択してください
11: <option value="北海道">北海道
～中略～
58: </select><br>
59:
60: 住所２ <input name=address2><br>
61: 住所３ <input name=address3><br>
62: 住所４ <input name=address4><br>
63: 名　称 <input name=address5><br>
64:
65: <input type=submit value="応募">
66: </form>
67: </body></html>

図2-3.入力欄とname属性

入力欄	name属性	入力内容	書式
郵便番号	postcode	1000001	%0%1
住所１	address1	東京都	%2
住所２	address2	千代田区	%3
住所３	address3	千代田	%4

図2-4. 入力欄のname属性と書式の設定スクリプト

jpp_obj.ELEMENT_FORMAT.postcode  = '%0%1';

jpp_obj.ELEMENT_FORMAT.address1  = '%2';
jpp_obj.ELEMENT_FORMAT.address2  = '%3';
jpp_obj.ELEMENT_FORMAT.address3  = '%4';

ケース3. 都道府県がテキストボックスの場合

都道府県の入力欄がテキストボックス（<input
type=text>）、プルダウンメニュー（<select>）いずれの場合でも、設定方法は同じです。

図3-1. 住所入力フォーム

住所入力
郵便番号 [100]-[0001]
住所１ [東京都]
住所２
[千代田区　　　　]
住所３ [千代田　　　　　]
住所４ [　　　　　　　　　]
名　称
[　　　　　　　　　]
【応募】

図3-2. HTMLソース

 1: <html><head>
 2: </head><body>
 3: <form action="../cgi-bin/regist.cgi" method=POST>
 4: 住所入力<br>
 5:
 6: 郵便番号 <input name=postcode1>-<input name=postcode2><br>
 7:
 8: 住所１
 9: <input name=address1><br>
～中略～
60: 住所２ <input name=address2><br>
61: 住所３ <input name=address3><br>
62: 住所４ <input name=address4><br>
63: 名　称 <input name=address5><br>
64:
65: <input type=submit value="応募">
66: </form>
67: </body></html>

図3-3.入力欄とname属性

入力欄	name属性	入力内容	書式
郵便番号 (上3桁)	postcode1	100	%0
郵便番号 (下4桁)	postcode2	0001	%1
住所１	address1	東京都	%2
住所２	address2	千代田区	%3
住所３	address3	千代田	%4

図3-4. 入力欄のname属性と書式の設定スクリプト

jpp_obj.ELEMENT_FORMAT.postcode  = '%0%1';

jpp_obj.ELEMENT_FORMAT.address1  = '%2';
jpp_obj.ELEMENT_FORMAT.address2  = '%3';
jpp_obj.ELEMENT_FORMAT.address3  = '%4';

ケース4. 都道府県の<option>のvalue属性について

J-POSTALは、都道府県に 東京都
を自動入力する場合、住所入力フォームの都道府県一覧アイテムから東京都のアイテムを探します。その際、次の順序で一致するアイテムを探します。

1.
<option>タグのvalue属性が東京都 (※1)

<option value="東京都">？？？

2. <option>タグのtext属性が東京都 (※2)

<option value="??">東京都

3. <option>タグのvalue属性が東京 (※3)

<option value="東京">？？？

4. <option>タグのtext属性が東京 (※3)

<option value="??">東京

※1 広く使われている方法です。
※2 valueに運用システム特有の都道府県IDを設定することも少なくありません。
※3
まれですが、「都」「府」「県」を省略した都道府県一覧を見かけることがあります。

ケース5. 市区町村から番地まで、１つの入力欄の場合

市区町村、町域、番地まで一つの入力欄（図5-1 の住所２）に入力する場合です。市区町村を表す書式 %3、町域を表す書式 %4 を並べて、’%3%4′
と設定します。(図5-4)

図5-1. 住所入力フォーム

住所入力
郵便番号 [100]-[0001]
住所１ [東京都]▼
住所２
[千代田区千代田　　　]
名　称
[　　　　　　　　　]
【応募】

図5-2. HTMLソース編集前

 1: <html><head>
 2: </head><body>
 3: <form action="../cgi-bin/regist.cgi" method=POST>
 4: 住所入力<br>
 5:
 6: 郵便番号 <input name=postcode1>-<input name=postcode2><br>
 7:
 8: 住所１
 9: <select name=address1>
10: <option value="" selected>選択してください
11: <option value="北海道">北海道
～中略～
58: </select><br>
59:
60: 住所２ <input name=address2><br>
61: 名　称 <input name=address5><br>
62:
63: <input type=submit value="応募">
64: </form>
65: </body></html>

図5-3.入力欄とname属性

入力欄	name属性	入力内容	書式
郵便番号 (上3桁)	postcode1	100	%0
郵便番号 (下4桁)	postcode2	0001	%1
住所１	address1	東京都	%2
住所２	address2	千代田区千代田	%3%4

図5-4. 入力欄のname属性と書式の設定スクリプト

jpp_obj.ELEMENT_FORMAT.postcode  = '%0%1';

jpp_obj.ELEMENT_FORMAT.address1  = '%2';
jpp_obj.ELEMENT_FORMAT.address2  = '%3%4';

ケース6. 大口事業所の番地、名称を利用する場合

J-PSOTALは大口事業所の郵便データを持っています。大口事業所データの入力欄と書式について考えるときは、「100-8111
東京都千代田区千代田１－１宮内庁」を入力します。

図6-1. 住所入力フォーム

住所入力
郵便番号 [100]-[8111]
住所１ [東京都]▼
住所２
[千代田区　　　　]
住所３ [千代田　　　　　]
住所４ [１－１　　　　　　]
名　称
[宮内庁　　　　　]
【応募】

図6-2. HTMLソース編集前

 1: <html><head>
 2: </head><body>
 3: <form action="../cgi-bin/regist.cgi" method=POST>
 4: 住所入力<br>
 5:
 6: 郵便番号 <input name=postcode1>-<input name=postcode2><br>
 7:
 8: 住所１
 9: <select name=address1>
10: <option value="" selected>選択してください
11: <option value="北海道">北海道
～中略～
58: </select><br>
59:
60: 住所２ <input name=address2><br>
61: 住所３ <input name=address3><br>
62: 住所４ <input name=address4><br>
63: 名　称 <input name=address5><br>
64:
65: <input type=submit value="応募">
66: </form>
67: </body></html>

図6-3.入力欄とname属性

入力欄	name属性	入力内容	書式
郵便番号 (上3桁)	postcode1	100	%0
郵便番号 (下4桁)	postcode2	0001	%1
住所１	address1	東京都	%2
住所２	address2	千代田区	%3
住所３	address3	千代田	%4
住所４	address4	１－１	%5
名称	address5	宮内庁	%6

図6-4.
入力欄のname属性と書式の設定スクリプト
大口事業所データはデフォルトでは無効なので、JIGYOSYOプロパティを１にして有効にします。

jpp_obj.ELEMENT_FORMAT.postcode1 = '%0';

jpp_obj.ELEMENT_FORMAT.postcode2 = '%1';
jpp_obj.ELEMENT_FORMAT.address1  = '%2';
jpp_obj.ELEMENT_FORMAT.address2  = '%3';
jpp_obj.ELEMENT_FORMAT.address3  = '%4';
jpp_obj.ELEMENT_FORMAT.address4  = '%5';
jpp_obj.ELEMENT_FORMAT.address5  = '%6';

jpp_obj.JIGYOSYO = 1;

Smarty動的webサイト構築入門

・本サイトの紹介ページ