ホームページなどを作成していて、郵便番号と住所を入力してもらいたい時があります。
多くのフォームでは、郵便番号を入力すると住所が自動で表示されたりしますね。
郵便番号を入力して、「住所表示」などのボタンをクリックすると住所が表示されるものも多いです。
 
その「住所表示」をクリックする必要もなく、郵便番号を入力するだけで住所を自動表示させることもできます。


 

使うのは、Ajaxzip3.js です。

ajaxzip3.js は、こちらからダウンロードすることができます。

⇒ https://github.com/ajaxzip3/ajaxzip3.github.io

 

でも、私は、ダウンロードせずに、直接、読み込んで使っています。

そうすれば、常に最新の郵便番号データが使えるからです。

 

使い方は、究極に簡単です。

まずは、<head>～</head>の中に、次の一行を記述します。

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

 

次に、フォームの作成です。

1つのボックスに郵便番号７桁を入力し、都道府県とそれ以降の住所を分ける場合は、

<input type="text" name="zip" maxlength="8" size="10" onKeyUp="AjaxZip3.zip2addr(this,'','pref','address');">
<input type="text" name="pref" size="20">
<input type="text" name="address" size="40">

実際に作ってみたので郵便番号を入れてみて下さい。

ハイフンは、入れても入れなくても、どちらでも動作するところが凄いです！

郵便番号：
都道府県：
住　　所：

 

1つのボックスに郵便番号７桁を入力し、都道府県とそれ以降の住所を分けない場合は、

<input type="text" name="zip" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','address','address');">
<input type="text" name="address" size="60">
郵便番号：
住　　所：

 

2つのボックスに郵便番号を3桁-4桁で入力したいときには、

<input type="text" name="zip1" size="4" maxlength="3"> - <input type="text" name="zip2" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip1','zip2','pref','address1','address2');">
<input type="text" name="pref" size="40">
<input type="text" name="address1" size="40">
<input type="text" name="address2" size="40">
郵便番号： –
都道府県：
市区町村：
それ以降：

 

Ajaxzip3 の引数は、以下のようになっています。

AjaxZip3.zip2addr( ‘〒上3桁’, ‘〒下4桁’, ‘都道府県’, ‘市区町村’, ‘町域大字’, ‘丁目番地’ );

簡単に設置できて、とても使いやすそうですね。

 

Amazonプライム会員なら無料で読めるビジネス書4選

上を目指すために読んでおきたい8冊

 

私が買ってよかったパソコン＆iPhone関連商品 トップ8