フォームで住所を自動入力するJavaScript -ajaxzip3, jquery.j-postal.js

問い合わせや資料請求フォーム設置の際、郵便番号を入れると住所を自動入力させるのはユーザービリティの向上と住所の入力ミスなどを防ぐ効果もあるので積極的に使っていきたい機能です。

設置が簡単なJavaScriptライブラリと設置例を紹介します。

ajaxzip3で住所自動入力

一つ目はajaxzip3です。Shift-JISにも対応している郵便番号検索スクリプト。jQuery不要で設置できます。

最新版にYubinbangoライブラリがあります。

ajaxzip3 設置例

jQuery、prototype.jsは不要になったようです。
スクリプトはutf-8なので、utf-8以外の文字コードで書かれているhtmlに設置する場合は、文字コードの指定charset="UTF-8"が必要です。

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

郵便番号の入力欄にonkeyup属性で以下の住所項目の要素を追加します。

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

ajaxzip3の基本形

<input type="text" name="zipcode" size="8" maxlength="8" onkeyup="AjaxZip3.zip2addr( this, '', 'pref', 'address' );">
<input type="text" name="pref" size="20">
<input type="text" name="address" size="60">

郵便番号＋住所の例

郵便番号の入力欄1つと住所の入力欄1つ

AjaxZip3.zip2addr()に指定する住所のname属性は日本語・英語どちらでもOKです。

<form method="post" action="">
    <dl>
      <dt>郵便番号</dt>
      <dd><input type="text" id="zipcode" name="郵便番号" size="8" maxlength="8" onkeyup="AjaxZip3.zip2addr(this,'','ご住所','ご住所');"></dd>
      <dt>ご住所</dt>
      <dd><input type="text" name="ご住所" id="address" class="input-long">
      </dd>
    </dl>
  </form>

ajaxzip3 DEMO

 郵便番号３桁＋郵便番号４桁＋住所の例

<form method="post" action="">
    <dl>
      <dt>郵便番号</dt>
      <dd><input type="text" id="zipcode" name="郵便番号1" size="8" maxlength="3"> - <input type="text" id="zipcode2" name="郵便番号2" size="8" maxlength="4" onkeyup="AjaxZip3.zip2addr('郵便番号1','郵便番号2','ご住所','ご住所');"></dd>
      <dt>ご住所</dt>
      <dd><input type="text" name="ご住所" id="address" class="input-long">
      </dd>
    </dl>
  </form>

ajaxzip3 DEMO

WordPressの問い合わせフォームでajaxzip3を使う

WordPressプラグインContact Form 7でajaxzip3を使うことができます。以下の記事で説明しています。

 jQueryプラグイン jquery.jpostal.jsを使う

こちらも使いやすいjQueryプラグインです。こちらは郵便番号、住所にIDを設定して設置します。

https://github.com/ninton/jquery.jpostal.js/

jquery.jpostal.jsやjsonファイルをダウンロードしなくても常に最新版が利用できるとのことです。

jquery.jpostal.jsの設置例

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>
<script type="text/javascript">
$(window).ready( function() {
  $('#postcode1').jpostal({
    postcode : [
      '#postcode1',
      '#postcode2'
    ],
    address : {
      '#address1'  : '%3',
      '#address2'  : '%4',
      '#address3'  : '%5'
    }
  });
});

郵便番号欄のIDを指定し、下記入力項目に対応した住所入力欄を指定します。

自サーバーに設置する場合

<form method="post" action="">
    <dl>
      <dt>郵便番号</dt>
      <dd><input type="text" id="zipcode" name="郵便番号" size="8" maxlength="8"></dd>
      <dt>ご住所</dt>
      <dd><input type="text" name="ご住所" id="address" class="input-long">
      </dd>
    </dl>
  </form>
      <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <script type="text/javascript" src="js/jpostal/jquery.jpostal.js"></script>
    <script>
      $(window).ready( function() {
      	$('#zipcode').jpostal({
      		postcode : [
      			'#zipcode'
      		],
      		address : {
      			'#address'  : '%3%4%5',
      		},
      		url : {
      			'http'  : 'js/jpostal/json/',
      			'https' : 'js/jpostal/json/'
      		}
      	});
      });
    </script>

json/*.json　が郵便番号データになります。

アップロードした場所を、url :{}に指定します。
URLは絶対パスでも相対パスでもOKで、httpとhttpsの両方を指定します。

this.url     = {
    'http'  : '//jpostal.googlecode.com/svn/trunk/json/',
    'https' : '//jpostal.googlecode.com/svn/trunk/json/',
};

 jquery.jpostal.js DEMO