WEB Tips デザイン・コーディング

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

2015-06-19

本記事にはプロモーションが含まれています。

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

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

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

ajaxzip3で住所自動入力

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

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

MW WP Form, Contact Form 7でYubinBango(住所自動入力)を使う方法

WordPressでフォームを設置するときの定番プラグインはContact Form 7とMW WP Formです。 専らContact Form 7を利用していたのですが、確認画面が欲しいという要望 ...

続きを見る

Google Code閉鎖により、ajaxzip3のURL変更が必須です。Githubに移行されています。
https://github.com/ajaxzip3/ajaxzip3.github.io

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

 郵便番号3桁+郵便番号4桁+住所の例

<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を使うことができます。以下の記事で説明しています。

Contact Form 7で郵便番号から住所を自動入力する方法

Wordpressで問い合わせフォームによく使われるプラグイン Contact Form 7 。 Contact Form 7で郵便番号から住所を自動入力させる方法として、プラグインを使う方法がありま ...

続きを見る

 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を指定し、下記入力項目に対応した住所入力欄を指定します。

書式住所の入力項目
%3都道府県
%4市区町村
%5町域
%6大口事業所の番地
%7大口事業所の名称
%8都道府県カナ
%9市区町村カナ
%10町域カナ(予定)
入力項目フォーマット

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

<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

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大50%キャッシュバッグ月額495円&ドメイン永久無料 - 2024年4月3日(水)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額678円 53%OFF ドメイン2個無料 - 2024年3月13日(木)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

-WEB Tips, デザイン・コーディング
-,